CODEWITHSUNDEEP
knockout.js
Adrian
Adrian

Reputation: 333

Knockout checkedValue Binding not showing checked

I am trying get a list of checkboxes get checked based on two observablearrays. The first one has a few programids and the second one will have all the records of programids. Both the observablearray's data come from the database.

Basically I am trying to get the list of programid already assigned for a user which is in ProgramIDs array and compare it with the array of AllPartnerPrograms array and show the ones that match as checked.

Then I want to be able to check from the new list and send it back to the server to update the user's data with the new list of programid.

I am not sure why the checkedValue binding is not work or I do not understand how to make it work. I created a fiddle with the same code here.

I am assuming that $root.AllPartnerPrograms will get show the checked items based on the self.ProgramIDs array but that does not happen.

If I put the code like this, it gets checked but does not show me the other records.

 <input type="checkbox" data-bind="checkedValue: ProgramID, checked: ProgramID" />  

If I change the foreach to <!-- ko foreach: AllPartnerPrograms --> then I get the other records but still not check based on the first list.

What am I doing wrong here?

My code

<div id="programs">
<!-- ko foreach: ProgramIDs -->    
<input type="checkbox" data-bind="checkedValue: ProgramID, checked: $root.AllPartnerPrograms" />    
<span data-bind="text: ProgramName"></span>
<!-- /ko -->

View Model

var objPartnerPrograms;
vmPartnerProgramsModel = function () {
var self = this;

self.ProgramIDs = ko.observableArray(
[{ProgramID: 16002,ProgramName: "Program1"}, 
 {ProgramID: 16003,ProgramName: "Program2"}, 
 {ProgramID: 16005,ProgramName: "Program3"}, 
 {ProgramID: 16006,ProgramName: "Program4"}, 
 {ProgramID: 16011,ProgramName: "Program5"
}]);

self.AllPartnerPrograms = ko.observableArray(
[{ProgramID: 16002,ProgramName: "Program1"}, 
 {ProgramID: 16003,ProgramName: "Program2"}, 
 {ProgramID: 16005,ProgramName: "Program3"}, 
 {ProgramID: 16006,ProgramName: "Program4"}, 
 {ProgramID: 16011,ProgramName: "Program5"}, 
 {ProgramID: 16102,ProgramName: "Program6"}, 
 {ProgramID: 16104,ProgramName: "Program7"
 }]);
};

$(document).ready(function () {
  objPartnerPrograms = new vmPartnerProgramsModel()
  ko.applyBindings(objPartnerPrograms, $("#programs")[0]);
});

Upvotes: 3

Views: 4198

Answers (2)

Peter Lea
Peter Lea

Reputation: 1751

Your not scoping your observable properly within your foreach loop, it should be accessed via $data.

Saying that, I'd only keep a single observable list with all options. Extend this option to have a boolean that the checked field can work with properly. When you come to save the values back to the database you can just loop through your array and get the ones that are checked.

var self = this;
var Program = function(id, name, isChecked) {
    return {
        id: ko.observable(id),
        name: ko.observable(name),
        isChecked: ko.observable(isChecked)
    }
}

self.programArray = ko.observableArray([]);
// populate observable array checking the programs that match in both your lists
self.programArray.push(new Program(1234, 'name', true));

// in page
<!-- ko foreach: programArray -->
    <input type="checkbox" data-bind="checked: $data.isChecked" />
<!-- /ko -->

HTH

Upvotes: 2

dotnetom
dotnetom

Reputation: 24901

Your view model ProgramIDs property should only contain IDs of selected items, not full elements:

self.ProgramIDs = ko.observableArray([16002, 16003, 16005, 16006, 16011]);

You also need to bind to full list property in foreach binding and use ProgramIds for checked binding:

<div id="programs">
    <!-- ko foreach: AllPartnerPrograms -->    
    <input type="checkbox" data-bind="checkedValue: ProgramID, checked: $root.ProgramIDs" />
    <span data-bind="text: ProgramName"></span>
    <!-- /ko -->
</div>

See updated jsFiddle.

Upvotes: 1

Related Questions