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 だけです。

 <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 に答える