Alex Rivera | Logout

Observing properties of an array that is being observed in KnockoutJS

Asked 2011-01-21T19:16:59.963
9

I'm working on an ASP.Net MVC application. My action is returning a view with a model that is an array of objects (a class with properties like Name, ID, IsViewable).

var model = @Model.ToJson(); // done via extension call

I want to observe this array, so whenever it changes I can update a table that has been bound to a template.

var viewModel = {
    accounts = ko.observableArray(model)
}

This works just fine for adding and deleting elements from the array. However, I also want the template to update when a property in one of the accounts changes (ie, Name or ID).

On the KnockoutJS website, it says: Of course, you can make those properties observable if you wish, but that’s an independent choice. This is what I cannot figure out how to do.

I tried something like this with no avail:

var viewModel = {
    accounts = ko.oservableArray([])
}

for(var i = 0; i < model.length; i++) {
    ko.observableArray(model[i]);
    viewModel.accounts.push(model[i]);
}

I can post the template and the table if it's needed.

model-view-controller templates knockout.js observable
Edit
Report

2 Answers

4

You should look into the knockout.mapping plugin. I think it does everything you are looking to do.

answered 2011-01-28T15:58:41.190
0

Here's another approach that works and doesn't require the mapping plugin:

var model = @Model.ToJson();

var viewModel = {
    accounts: ko.observableArray([]),

    fromJS: function(js) {
        for (var i = 0; i < js.length; i++) {
            this.accounts.push({ 
                Property1: ko.observable(js[i].Property1),
                Property2: ko.observable(js[i].Property2),
                Property3: ko.observable(js[i].Property3)
            });
        }
    }
};

viewModel.fromJS(model);
ko.applyBindings(viewModel);
answered 2011-02-26T04:01:06.897

Your Answer