Cannot get observableArray to sort while keeping it's items properties observable too

[simone.c...@gmail.com]

Hi all,

I'm having a bit of a problem having an observable array of objects to work.

I have to load the array from a separate JS array and create a new item for each element of the source array:

self.Votes = ko.observableArray([]);

self.Votes = $.map(Countries, function(item) { return new StateVote(item) });

function StateVote(country){

this.Country=country;

this.Vote=ko.observable();

this.Partecipating=ko.observable('Yes');

}

Then the Votes array is bound to a list, and the Vote and Participating properties are bound to select elements.

    <tbody data-bind="foreach: Votes">

        <tr>

            <td data-bind="text: Country.Name"></td>

            <td><select data-bind="options: ['Choose...','Yes','No','Abstain'], value: Vote"></select></td>

            <td><select data-bind="options: ['Yes','No'], value: Partecipating"></select></td>

        </tr>    

    </tbody>

My problem is: if I load the array like I've just shown, I get binding on the properties Vote and Partecipating (if I change them in the select I see computed values change, and if I change them programmaticaly, the seleceted element changes. But I cannot sort the list.

While if I load the array like:

self.Votes = ko.observableArray($.map(Countries, function(item) { return new StateVote(item) }));

I get the sorting on list, but the single properties are not bound any more (changing their value doesn't make computed to change, and UI is not updated when changing values programmticaly)

Any idea of what I'm doing wrong?

Thank you

Simone

PS:

if relevant the Countries array is defined as:

Countries = [

{

"Code":"BE",

"Name":"Belgium",

"OriginalName":"Belgique / Belgie",

"Votes":12,

"Population":11007020

},

{

"Code":"BG",

"Name":"Bulgaria",

"OriginalName":"Bulgaria",

"Votes":10,

"Population":7364570

},

...........

[Patrick Steele]

When you "create" an observable array like this:

self.Votes = ko.observableArray([]);

You're actually pointing "self.Votes" to a knockout function that is used to manage the array.  Therefore, when you do this:

self.Votes = $.map(Countries, function(item) { return new StateVote(item) });

You've changed self.Votes to be just an array of StateVote items -- you've changed what it is.  Once you've defined your observableArray (or even a regular observable), you must "call" it to get or set the data.  What you want is:

self.Votes = ko.observableArray([]);

self.Votes($.map(Countries, function(item) { return new StateVote(item) }));

That sends your new array to be the array that knockout will track inside self.Votes.  Likewise, if you wanted to get the array from self.Votes, you'd "call" it:

var votes = self.Votes();

---
Patrick Steele
http://weblogs.asp.net/psteele

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Simone Chiaretta]

Thank you for the answer, but even like that I don't get it to work:

This http://jsfiddle.net/L3TeP/ is version with sorting working but without binding on the internal properties (if you change the value of the select the counter on the bottom should change)

Thx

Simone

--
You received this message because you are subscribed to a topic in the Google Groups "KnockoutJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/knockoutjs/jHcKLaZcCyE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to knockoutjs+...@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.
 
 

--

Simone Chiaretta
Microsoft MVP ASP.NET - ASPInsider
Blog: http://codeclimber.net.nz
RSS: http://feeds2.feedburner.com/codeclimber
twitter: @simonech

[Simone Chiaretta]

Nevermind.... I found the problem...

I also needed to address the array as method even during the for loop, using self.Vote()[i] instead of just self.Vote[i]

thx

Simone