1

我正在学习淘汰赛，并试图建立一个页面来建立一个可选择的用户列表。JSFiddle： http: //jsfiddle.net/Just/XtzJk/3/（我无法正确分配数据）。

当我调用 Controller 时，数据分配正在我的页面中工作，如下所示，它按预期绑定到控件

$.getJSON("/Wizard/GetUsers",function(allData){
        var mappedUsers = $.map(allData.AllUsers, function(item){return new User(item)});
        self.AllUsers(mappedUsers);
        if(allData.SelectedUsers != null){
        var mappedSelectedUsers = $.map(allData.SelectedUsers, function(item){return new User(item)});
        self.SelectedUsers(mappedSelectedUsers);}
    });

问题：

a.) 我写的 JSFiddle 有什么问题？得到它的工作。

b.）在我的代码中，我能够获取调用的选定复选框的函数，但我无法获取存储在函数中收到的“用户”参数中的值。在 Chrome JS 控制台中，我可以看到用户对象存储了正确的值，但我无法检索它。通过执行 ko.toJS() 得到这个。

谢谢。

编辑：好的，我的 JSFiddle 工作了，我必须在框架中选择 Knockout.js。更新的小提琴：http: //jsfiddle.net/Just/XtzJk/5/

另外，为了获得选中的复选框的值，我做了

ko.toJS(user).userName

但我想我会采取从列表中选择值的方法，然后单击将它们移动到另一个“选定”列表并从以前的列表中删除值。从这篇文章中得到了这个想法：KnockoutJS：如何将一个 observableArray 添加到另一个？

4

1 回答 1

8

好的，我想我已经找到了您需要的解决方案...

我首先设置了一个可观察的数组selectedUserNames，然后将其应用于如下<li>元素：

<input type="checkbox" 
       name="checkedUser" 
       data-bind="value: userName, checked:$root.selectedUserNames" />

[注意：value在声明绑定之前声明很重要checked，这让我有点……你每天都学到新东西！]

为什么要将一组 userName 值绑定到已检查的绑定？好吧，当一个数组被传递给checked绑定时，KO 会将每个复选框的值与数组中的值进行比较，checked并检查其值在该数组中的任何复选框。（可能在KO 文档中解释得更好）

然后，当我为 SelectedUsers 留下 observableArray 时，我设置了一个手动订阅来填充它，如下所示：

self.selectedUserNames.subscribe(function(newValue) {
    var newSelectedUserNames = newValue;
    var newSelectedUsers = [];
    ko.utils.arrayForEach(newSelectedUserNames, function(userName) {
        var selectedUser = ko.utils.arrayFirst(self.AllUsers(), function(user) {
            return (user.userName() === userName);
        });
        newSelectedUsers.push(selectedUser);
    });
    self.SelectedUsers(newSelectedUsers);
});

[我最初试图为 selectedUserNames 设置一个依赖的 observable (ko.computed)，具有读写功能，但复选框没有它。]

此订阅函数检查新selectedUserNames数组，查找与该数组中的值匹配的用户AllUsers，userName并将selectedUserNames匹配User的对象推送到SelectedUsers数组……实际上，它会将每个匹配项推User送到临时数组，然后将该临时数组分配给SelectedUsers，但是目标已实现。该SelectedUsers数组现在将始终包含我们希望它包含的内容。

哦，我差点忘了……这是我创建的小提琴，所以你有完整的解决方案：http: //jsfiddle.net/jimmym715/G2hxP/

希望这会有所帮助，但如果您有任何问题，请告诉我

于 2012-08-24T16:23:52.477 回答