CODEWITHSUNDEEP
javascriptknockout.jsknockout-mapping-pluginknockout-2.0
Arbejdsglæde
Arbejdsglæde

Reputation: 14098

Knockout doesn't change check box state in array of objects

I am using array of objects to create a checkbox selector, but for some reason, when I click on a checkbox it returns the default value. Why does this happen ?

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

Updated code : I have founded the 1 part of issue, it is related to click: myFunction.bind($data) event if remove click event it start working. But just for tObj.Roles not for alldata array. 

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

Upvotes: 3

Views: 492

Answers (1)

Vladimir
Vladimir

Reputation: 7475

Plausible, that it is connected with default click action, i.e. checkbox value change. Try using return true; from click handler.

Upvotes: 1

Related Questions