敲除复选框绑定选定的值

时间:2012-08-24 13:49:45

标签: checkbox knockout.js

我正在学习淘汰赛,并且正在尝试构建一个可以构建可选用户列表的页面。 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: How to add one observableArray to another?

1 个答案:

答案 0 :(得分:8)

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

我首先设置了selectedUserNames的可观察数组,然后将其应用于<li>这样的元素:

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

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

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

然后,当我离开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数组,从AllUsersuserName数组中的值匹配的selectedUserNames中查找用户,并推送匹配的{{1}对User数组的对象......实际上,它将每个匹配的SelectedUsers推送到临时数组,然后将该临时数组分配给User,但目标得以实现。 SelectedUsers数组现在将始终包含我们希望它包含的内容。

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

希望这会有所帮助,但如果您有任何疑问,请与我联系