敲除复选框绑定选定的值

Question

我正在学习淘汰赛,并且正在尝试构建一个可以构建可选用户列表的页面.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.)在我的代码中,我能够调用所选复选框的函数,但是我无法获得存储在函数中收到的"User"参数中的值.在Chrome JS控制台中,我可以看到用户对象存储了正确的值,我无法检索它.通过ko.toJS()得到了这个.

谢谢.

编辑:好的,我让我的JSFiddle工作,我不得不在框架中选择Knockout.js.更新的小提琴:http://jsfiddle.net/Just/XtzJk/5/

另外,为了获得所选复选框的值,我做了

ko.toJS(user).userName

但我认为我将采用从列表中选择值的方法,然后单击将它们移动到另一个"选定"列表并从之前的值中删除值.从这篇文章中得到了这个想法:KnockoutJS:如何将一个observableArray添加到另一个？

Answer 1

好的,我想我已经得到了你需要的解决方案......

我开始设置一个可观察的数组selectedUserNames,并将其应用于这样的<li>元素:

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

[注意:value在声明checked绑定之前声明这一点非常重要,这让我有点意思......你每天都在学习新东西!]

为什么将userName值数组绑定到选中的绑定？好吧,当一个数组传递给checked绑定时,KO会将每个复选框的值与checked数组中的值进行比较,并选中其值在该数组中的任何复选框.(可能在KO文档中有更好的解释)

然后,当我离开observableArray for SelectedUsers时,我设置了一个手动订阅来填充它,如下所示:

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),其中包含read和write的函数,但是复选框没有它.

此订阅功能检查新的selectedUserNames阵列,查找从用户AllUsers,其userName在一个值匹配selectedUserNames阵列,并推匹配User对象的SelectedUsers数组......好吧,其实它推动每个匹配User到一个临时数组,然后将该临时数组分配SelectedUsers,但目标得以实现.SelectedUsers现在,数组将始终包含我们希望它包含的内容.

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

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