Knockout映射兩個數組之間的選定值

我需要在UI上顯示來自獨立JSON數組（lstRoles）的所有複選框，並將選定複選框作爲結果數組映射到結果JSON對象（tObj）中的屬性角色。但我不知道如何在正確的掃管笏中做到這一點（我剛開始學習Knockout）。如果結果JSON對象已經有一些數據，如何初始化複選框。Knockout映射兩個數組之間的選定值

<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>

來源

2013-03-21 Arbejdsglæde

不知道你在這裏試圖實現什麼，但你的viewmodel和綁定看起來完全不合適。你綁定到viewModel，lstRoles沒有在視圖模型中定義。 myFunction不在你的viewModel中，你不能調用它。這裏是更新的小提琴http://jsfiddle.net/sujesharukil/jEyb9/ – 2013-03-22 13:33:17

謝謝。我已經添加了更新的代碼作爲答案，我會很樂意從您那裏獲得反饋。 – 2013-03-22 16:36:33

我已經更新了我的代碼，並得到了我需要的行爲。但我不確定這種方式是否100％正確。歡迎您提出任何意見。

<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>

來源

2013-03-22 16:35:40

myFunction和myFunction1必須屬於您綁定到的視圖模型。告訴我們你到底在找什麼。在要求方面，我們可以提供幫助。 – 2013-03-22 17:54:56

您好我需要根據lstRoles數組創建複選框列表，並將所有cheched值複製到tObj.roles數組。我希望這是簡短的描述對你有好處。 – 2013-03-23 09:42:13

Knockout映射兩個數組之間的選定值

回答

相關問題