Checkbox list bound to observable array - items not checking

[mbtot...@gmail.com]

Hi folks,

So I have been successfully adding/removing checked objects (2 properties: Display, Value) to a bound observable array and saving the selections to a database.

Now in an editing scenario, when I pull the selections from the database and populate my observable array (SelectedGenders), the associated checkboxes aren't checked.  From what I can tell, the selected objects are in the observable array (see display below).

I've tried 3 different techniques to populate my observable array, again all seem to have placed the values into the array, the associated checkboxes just aren't being checked.

Any ideas on what might be going on?

// 3 different ways of populating the array in the View Model  //////////////////////////////////

1)  self.RecipientOptions.SelectedGenders(allData.RecipientOptions.SelectedGenders);

2)  for (var i = 0; i < allData.RecipientOptions.SelectedGenders.length; i++) {

var chkboxitem = new CheckboxOption(allData.RecipientOptions.SelectedGenders[i].Display, allData.RecipientOptions.SelectedGenders[i].Value);

self.RecipientOptions.SelectedGenders.push(chkboxitem);

}

3)  var mappedSelectedGenders = $.map(allData.RecipientOptions.SelectedGenders, function (item) { return new CheckboxOption(item.Display, item.Value); });

self.RecipientOptions.SelectedGenders(mappedSelectedGenders);

//The Markup and bindings ////////

<!--ko foreach: Lists.GenderCodes()-->

<div class="fieldControl" style="margin-left:30px">

<input type="checkbox" data-bind="checkedValue : $data, enable: !$root.RecipientOptions.AllGenders(), checked:$root.RecipientOptions.SelectedGenders"/><span data-bind=" text: Display"></span>

</div>

<!-- /ko--> 

<div style="clear:both"></div>

<div data-bind="foreach: RecipientOptions.SelectedGenders()">

<span data-bind="text: $data.Display"></span>, <span data-bind=" text: $data.Value"></span>&nbsp;

</div>

  

/////////////Displaying what's in the array below, checkboxes not checked.///////

[Noirabys]

hi,

perhaps you don't use the same objects in genderCodes and the selected array?

i guess that ko compares the object identity

best regards,

 noirabys

[mbtot...@gmail.com]

Hopefully you can see the screenshot above.  So the GenderList and the SelectedGender List (displayed below) both have the ChecboxOption("Female", "F").  But the checkbox associated in the Gender List is not checked.

If I physically check the Female checkbox, it adds another Female, F to the SelectedGender List. If I uncheck it, it removes only the one that was just added.  I don't understand what the disconnect is here.

Checked:

 

Unchecked:

[mbtot...@gmail.com]

Sorry, here's the code:

<script src="@Url.Content("~/Scripts/TestViewModel.js")" type="text/javascript"></script>

<h2>Test</h2>

<!--ko foreach: GenderList()-->

<div class="fieldControl" style="margin-left:30px">

<input type="checkbox" data-bind="checkedValue : $data, checked: $root.SelectedGenders"/><span data-bind=" text: Display"></span>

</div>

<!-- /ko-->

<br /><br />

<div style="clear:both"></div>

<div data-bind="foreach: SelectedGenders()">

<span data-bind="text: $data.Display"></span>, <span data-bind="text: $data.Value"></span>&nbsp;

</div>

　

<script type="text/javascript">

$(document).ready(function () {

//binding has to occur after html is rendered

ko.applyBindings(new TestViewModel());

}); //end document ready

</script>

function CheckboxOption(display, value) {

this.Display = display;

this.Value = value;

}

function TestViewModel() {

var self = this;

self.GenderList = ko.observableArray();

self.SelectedGenders = ko.observableArray();

self.GenderList.push(new CheckboxOption("Male","M"));

self.GenderList.push(new CheckboxOption("Female","F"));

self.GenderList.push(new CheckboxOption("Unknown", "U"));

self.SelectedGenders.push(new CheckboxOption("Female", "F"));

}

 

[Noirabys]

Hi,

thats what i already guessed , use the same objects.. 

ko compares object identity 

replace this line: 

self.SelectedGenders.push(new CheckboxOption("Female", "F"));

with this:

self.SelectedGenders.push(self.GenderList()[1]);

best regards,

 noirabys

Am Donnerstag, 23. April 2015 21:57:11 UTC+2 schrieb mbtot...@gmail.com:

[mbtot...@gmail.com]

I appreciate your help.  Your example below - self.SelectedGenders.push(self.GenderList()[1]); - indeed does work.  I'm doing something that I thought was the same thing - pushing what I thought to be the same object - but it doesn't seem to be working.

In this case I have some Selected Genders that were previously saved to the server.  I want to loop through these and find a match in the self.GenderList.  When I find a match in the self.GenderList (using arrayFirst), I push what I believed to be the same object (matchingGender) into self.SelectedGenders.  I get the same result that I reported early.  There is a "Female", "F" in both arrays, but they don't seem to correlate.  If arrayFirst doesn't get me the matching object, what should I be using?

for (var i = 0; i < dataFromServer.SelectedGenders.length; i++) {

var chkboxitem = new CheckboxOption(dataFromServer.SelectedGenders[i].Display, dataFromServer.SelectedGenders[i].Value);

var matchingGender = ko.utils.arrayFirst(self.GenderList(), function (gender) {

return dataFromServer.SelectedGenders[i].Value === gender.Value;

});

self.SelectedGenders.push(matchingGender);

}

[Noirabys]

Hi,

without code, it's a bit hard to find the failure arrayFirst should work as expected...

perhaps check what's in dataFromServer.SelectedGenders and its type, sometimes you have a json string and not a javascript objects...

sorry for late reply

[Marlene T]

After looking at it a thousand times, I finally saw that I was mixing up my dataFromServer.GenderList and my self.GenderList.  (self.GenderList was populated with dataFromServer.GenderList, but I was looping through dataFromServer.GenderList to find the matching object instead of self.GenderList).  Conceptually, I knew what I wanted to do, but that's just not what I was doing. 

But arrayFirst did indeed work and I thank you for explaining about the matching object/object identity concept in the first place.

Cheers!