3

我使用的是对象数组来创建复选框选择器,但出于某种原因,当我单击复选框时,它将返回默认值。为什么会发生?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="foreach: alldata"> 
    <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),checked: $data.rc " />  
    </li> 
</ul> 

<hr /> 

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

<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", rc:true},{id:2, name:"Role2", desc:"Desc2", rc:false},{id:2, name:"Role3", desc:"Desc3",rc:true},{id:2, name:"Role4", desc:"Desc4", rc:false}]; 

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

ko.applyBindings(viewModel); 
    function myFunction(data) 
    { 
     //viewModel.roles.push(data); 
    } 
</script> 
</body> 
</html> 

更新后的代码:如果myFunction.bind($数据)事件删除点击事件就开始工作: 我已经成立问题的第一部分,它被点击相关。但只适用于tObj.Roles不适用于alldata数组。

<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 }, checked: $data.rc, enable: $data.ds" />   
     <span data-bind="text: $data.name"> </span> 
     <span data-bind="text: $data.desc"> </span></br> 

</div> 

<hr /> 

<div data-bind="foreach: roles">  
     <input type="checkbox" data-bind="attr: { value: $data }, 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":[{id:1, name:"Role1", desc:"Desc1", rc:true, ds:true},{id:2, name:"Role2", desc:"Desc2", rc:false, ds:false},{id:2, name:"Role3", desc:"Desc3",rc:true, ds:false},{id:2, name:"Role4", desc:"Desc4", rc:false, ds:true}]}; 
var lstRoles=[{id:1, name:"Role1", desc:"Desc1", rc:true, ds:true},{id:2, name:"Role2", desc:"Desc2", rc:false, ds:false},{id:2, name:"Role3", desc:"Desc3",rc:true, ds:false},{id:2, name:"Role4", desc:"Desc4", rc:false, ds:true}]; 

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

ko.applyBindings(viewModel); 
    function myFunction(data) 
    { 
     //viewModel.roles.push(data); 
    } 
</script> 
</body> 
</html> 
+0

'lstRoles'不是“JSON数组”。这只是一个数组。您发布的代码中没有JSON。 – 2013-03-22 09:25:54

+0

谢谢,我解决了我的语法问题 – 2013-03-22 09:29:06

+0

其实你做得更糟了;)我会修复它([那些不是JSON对象](http://benalman.com/news/2010/03/theres-no-such作为一个JSON /),他们只是对象)。 – 2013-03-22 09:30:36

回答

1

合理的是,它与默认的点击操作相关,即复选框值的变化。尝试使用return true;从点击处理程序。

+0

是的,你是对的 – 2013-03-24 20:35:58

相关问题