如何在 SharePoint 上向此淘汰 JavaScript 添加额外的列表函数

How can I add an extra list function to this knockout javascript on Sharepoint?

本文关键字：添加 函数 列表 JavaScript 淘汰 SharePoint      更新时间：2023-09-26

所以我以前从未真正使用过Knockout，所以我对此很陌生。

预先存在的挖空意味着，当在下拉列表中单击某个值时，可以在下一个下拉列表中选择特定的值列表。我现在向第一个列表添加第二个值，该值更改第二个下拉列表中的值。这些下拉列表值都是从 2 个不同的 SharePoint 列表导入的。

$.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);"/>
            &nbsp; 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>

因此，当我单击一个应用程序时，我想更改卷轴，但是我遇到了问题。 谢谢

要处理选择更改，您可以使用以下两种方式之一：

  1. 订阅可观察的$data.selectedApp应该是。[这种方式更像是"淘汰赛"]

  2. 或者使用淘汰事件绑定。 

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>

相关文章：