剔除映射两个数组之间的选定值答案

【问题标题】：Knockout mapping selected values between two arrays剔除映射两个数组之间的选定值
【发布时间】：2013-03-21 20:53:33
【问题描述】：

我需要在 UI 上显示来自独立 JSON 数组 (lstRoles) 的所有复选框，并将选定的复选框作为结果数组映射到结果 JSON 对象 (tObj) 中的属性角色。但我不知道如何正确地做到这一点（我刚开始学习 Knockout）。如果结果 JSON 对象已经有一些数据，如何初始化复选框。

    <html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="knockout-2.2.1.js"></script>
<script src="knockout.mapping-latest.js"></script>

</head>
<body>
<span data-bind="text: name"></span>

 <ul data-bind="template: { name: 'choiceTmpl', foreach: lstRoles },click: myFunction.bind($data)"></ul>

<ul data-bind="foreach: lstRoles">
    <li>
        Name at position <span data-bind="text: $index"> </span>:
        <span data-bind="text: $data.name"> </span>
        <input type="checkbox" data-bind="attr: { value: $data },click: myFunction.bind($data) " />
        <a href="#" data-bind="click: $parent.removePerson">Remove</a>
    </li>
</ul>

<hr />

<div data-bind="text: ko.toJSON(viewModel)"></div>

<script id="choiceTmpl" type="text/html">
    <li>
        <input type="checkbox" data-bind="attr: { value: $data } " />
        <span data-bind="text: $data.name"></span>
    </li>
</script>



<script type="text/javascript">

var tObj = {"name":"John", "roles":[{id:1, name:"Role1", desc:"Desc1"},{id:2, name:"Role2", desc:"Desc2"}]};
var lstRoles=[{id:1, name:"Role1", desc:"Desc1"},{id:2, name:"Role2", desc:"Desc2"},{id:2, name:"Role3", desc:"Desc3"},{id:2, name:"Role4", desc:"Desc4"}];

var viewModel = ko.mapping.fromJS(tObj);
viewModel.alldata = lstRoles;
ko.applyBindings(viewModel); 
    function myFunction(data)
    {
       viewModel.roles.push(data);
    }
</script>
</body>
</html>

【问题讨论】：

不确定您要在这里实现什么，但您的视图模型和绑定看起来完全不合适。您正在绑定到 viewModel，lstRoles 未在视图模型中定义。 myFunction 在您的 viewModel 之外，您不能调用它。这是一个更新的小提琴jsfiddle.net/sujesharukil/jEyb9
谢谢。我已经添加了更新的代码作为答案，我很高兴得到你的反馈。

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

我已经更新了我的代码并且我得到了我需要的行为。但我不确定这种方式是否 100% 正确。欢迎您使用任何 cmets。

 <html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="knockout-2.2.1.js"></script>
<script src="knockout.mapping-latest.js"></script>

</head>
<body>
<span data-bind="text: name"></span>

<div data-bind="foreach: alldata">    
        <input type="checkbox" data-bind="attr: { value: $data }, click: function(data, event) { return myFunction1(data, event); }, checked: $data.rc" />          
        <span data-bind="text: $data.name"> </span>
        <span data-bind="text: $data.desc"> </span></br>

</div>

<hr />

Count Select Roles : <span data-bind="text: roles().length"> </span><br/>

<div data-bind="foreach: roles">    
        <input type="checkbox" data-bind="attr: { value: $data },click: function(data, event) { return myFunction1(data, event); }, checked: $data.rc" />          
        <span data-bind="text: $data.name"> </span>
        <span data-bind="text: $data.desc"> </span></br>

</div>

<hr />

<div data-bind="text: ko.toJSON(viewModel)"></div> 

<script type="text/javascript">

var tObj = {"name":"John", "roles":[]};
var lstRoles=[{id:1, name:"Role1", desc:"Desc1", rc:true, ds:true},{id:2, name:"Role2", desc:"Desc2", rc:false, ds:false},{id:3, name:"Role3", desc:"Desc3",rc:true, ds:false},{id:4, name:"Role4", desc:"Desc4", rc:false, ds:true}];

var viewModel = ko.mapping.fromJS(tObj);
viewModel.alldata = ko.observableArray(lstRoles);

viewModel.initRoles = function()
{
    ko.utils.arrayForEach(viewModel.alldata(), function(item){
      if (item.rc)
        {
        viewModel.roles.push(item);
        }
    });
};

viewModel.initRoles();

ko.applyBindings(viewModel); 
    function myFunction(data)
    {
       viewModel.roles.push(data);
       return true;
    }

 function myFunction1(data, event)
    {
      if ($(event.toElement).is(':checked'))
       {    
          viewModel.roles.push(data);
       }    
    else
    {
       viewModel.roles.remove(function(item)
            {                
        return (item.id == data.id);
        });
    }

       return true;
    }


</script>
</body>
</html>

【讨论】：

myFunction 和 myFunction1 必须属于您要绑定的视图模型。告诉我们您到底在寻找什么。在要求方面，也许我们可以提供帮助。
您好，我需要根据 lstRoles 数组创建复选框列表，并将所有 cheched 值复制到 tObj.roles 数组。我希望它是简短的描述对你有好处。