So I have never really used Knockout before so I'm very new to this.
The pre-existing knockout means that when a certain value is clicked on a dropdown a certain list of values become available to select in the next dropdown. I'm now adding a second value to the first list which changes the values in the second dropdown. These dropdown values are all imported from 2 different sharepoint lists.
$.when(
$.getJSON('../_vti_bin/listdata.svc/ApplicationList?$select=Id,ApplicationName,ApplicationDescription'),
$.getJSON('../_vti_bin/listdata.svc/ApplicationRoleList?$select=ApplicationID,RoleID,RoleNameValue,Description,PrivilegedValue')
).then(function(apps, roles){
// both ajax calls are finished now
var rolesMap = {}; // {AppID1: [role1, role2], AppID2: [role3, role4]}
if (roles[0].d && roles[0].d.results) {
var r = roles[0].d.results;
for (var i = 0; i < r.length; i++) {
if (!rolesMap[r[i].ApplicationID]) {
rolesMap[r[i].ApplicationID] = [];
}
rolesMap[r[i].ApplicationID].push(r[i]);
}
}
if (apps[0].d && apps[0].d.results) {
var a = apps[0].d.results;
for (var i = 0; i < a.length; i++) {
var app = {
ApplicationID: a[i].Id,
ApplicationName: a[i].ApplicationName,
ApplicationDescription: a[i].ApplicationDescription,
roles: rolesMap[a[i].Id]
};
model.applications.push(app);
model.applicationMap[app.ApplicationID] = app;
}
}
else if(apps[1].d && apps[0].d.results) {
var a = apps[0].d.results;
for (var i = 0; i < a.length; i++) {
var app = {
ApplicationID: a[i].Id,
ApplicationName: a[i].ApplicationName,
ApplicationDescription: a[i].ApplicationDescription,
roles: rolesMap[a[i].Id]
};
model.applications.push(app);
model.applicationMap[app.ApplicationID] = app;
}
}
});
ASPX:
<td class="ms-vb">
Application:
<select data-bind="value: $data.selectedApp, options: $parent.applications, optionsText: 'ApplicationName', optionsCaption: 'Choose an Application'" style="width: 32px" name="Application list" id="dataBox">
</select>
<img src="../SiteAssets/helpbutton.png" class="helpbutton" onmouseover="displayAppHelpText(this);"/>
Role: <select data-bind="value: selectedRole, options: roles, optionsText: 'RoleNameValue', optionsCaption: 'Choose a Role'"></select>
<button data-bind="click: addSelectedRole" id="add_button">Add</button>
<img src="../SiteAssets/helpbutton.png" class="helpbutton" onmouseover="displayRoleHelpText(this);"/>
<span class="hidden">
<select class="appnames" data-bind="value: $data.selectedApp, options: $parent.applications, optionsText: 'ApplicationName', optionsCaption: 'App'"></select>
<select class="appdescriptions" data-bind="value: $data.selectedApp, options: $parent.applications, optionsText: 'ApplicationDescription', optionsCaption: ''"></select>
<select class="rolenames" data-bind="value: selectedRole, options: roles, optionsText: 'RoleNameValue', optionsCaption: 'Please select an Application first'"></select>
<select class="roledescriptions" data-bind="value: selectedRole, options: roles, optionsText: 'Description', optionsCaption: ''"></select>
</span>
So when I click an application I want to change the roll, however I am having problems with this. Thanks
For handling select change you could use one of 2 ways:
Subscribe to observable which $data.selectedApp should be. [this way is more 'Knockout-ish']
Or use knockout event binding .
var viewModel = { choices: [ {label:"one", code: 1}, {label:"two", code: 2}, {label:"three", code: 3} ], selectedChoice: ko.observable(2) , selectionChanged: function(event) { alert("The event binding way. New value is " + $( "#eventBindingWay option:selected" ).val()); } }; viewModel.selectedChoice.subscribe(function(newValue) { alert("The observable subscribtion way. New value is " + newValue); }); ko.applyBindings(viewModel);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> Subscribtion way: <select id="subscribtionWay" data-bind="options: choices, value: selectedChoice, optionsText:'label', optionsValue:'code',"></select> <br /><br /> Event binding way: <select id="eventBindingWay" data-bind="event:{ change: selectionChanged }"> <option value="A">A label</option> <option value="B">B label</option> <option value="C">C label</option> </select>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.