knockoutjs how to map nested observable array

Question

I got couple question with the following code

Does the TokenList in PromoTemplate a observableArray, what happened to each item in the array ? are they automatically gets wrapped into observable?

All the binding seems to work, i am be able to get all the way down to a Token's value, but when I modify the data in a input it doesn't seem to notify other controls that are bound to the same property, for example the AttributeToken.Value.

function AttributeToken(data) {
    this.Identifier = ko.observable(data.Identifier)
    this.DataType = ko.observable(data.DataType)
    this.Value = ko.observable(data.Value);
}

function PromoTemplate(data) {
    this.Identifier = ko.observable(data.Identifier);
    this.Name = ko.observable(data.Name);
    this.Content = ko.observable(data.Content);
    this.TokenList = ko.observableArray(data.Tokens);
    this.Sample;
}

function PromoTemplateViewModel() {
    // Data
    var self = this;
    self.promoTemplates = ko.observableArray([]);


    self.selectedPromoTemplate = ko.observable();

    // Init
    $.getJSON(promoTemplatesUrl, function (allData) {
        var mappedPromoTemplates = $.map(allData, function (item) { return new PromoTemplate(item) });
        self.promoTemplates(mappedPromoTemplates);
    });

}

the json data look like the following

[{"Content":"<product><data price = \"100\" discountPercentage=\"{Percentage}\" startDate=\"{StartDate}\" ><\/data><\/product>","Description":null,"Identifier":"1","Name":"Percentage Promo","Tokens":[{"DataType":"double","Identifier":"{Percentage}","Value":"20"},{"DataType":"date","Identifier":"{StartDate}","Value":"10\/21\/2012"}]},{"Content":"<product><data price = \"250\" discountAmount=\"{DiscountAmount}\" startDate=\"{StartDate}\" ><\/data><\/product>","Description":null,"Identifier":"2","Name":"Dollar off Promo","Tokens":[{"DataType":"integer","Identifier":"{DiscountAmount}","Value":"5"},{"DataType":"date","Identifier":"{StartDate}","Value":"10\/21\/2012"}]}]

RP Niemeyer · Accepted Answer · 2012-03-16 01:13:16Z

2

observableArrays do not automatically make all of the properites of the items that they hold observable. An observableArray will only notify subscribers when you manipulate the array itself (push, pop, slice, etc.) or replace the array entirely.

So, in your case, you would need to map data.Tokens to AttributeToken instances in a similar manner to how you are mapping the overall data or look at using something like the mapping plugin.

answered Mar 16, 2012 at 1:13

RP Niemeyer

115k18 gold badges295 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

knockoutjs how to map nested observable array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related