3

我正在使用对象数组来创建一个复选框选择器，但由于某种原因，当我单击一个复选框时，它会返回默认值。为什么会这样？

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

更新代码： 我已经建立了问题的 1 部分，它与点击有关：myFunction.bind($data) 事件如果删除点击事件它开始工作。但仅适用于 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>
4

1 回答 1

1

似是而非的，它与默认的点击动作有关，即复选框值的变化。尝试使用 return true; 从点击处理程序。

于 2013-03-24T19:43:44.997 回答