Using Knockout Observable Array

Question

I am working on a MVC project and I am using knockout at client side to manipulate the data. When I receive the data from the server simply i pass it to a observableArray as below. The data is converted to JSON at server side. I receive the data as JSon.

Now my problem is with knockout because when i bind the data for example to a textbox, and i want to see the text box edited value in a label as below

<p>First name: <strong data-bind="text: name()[0].firstName "></strong></p>
<p>Last name: <strong data-bind="text: name()[0].lastName"></strong></p>
<input data-bind="value: name()[0].firstName" />
<input data-bind="value: name()[0].lastName" />


var self = this;

        self.users= ko.observableArray(@Html.Raw(Model.UserJSON));

I cant get the changed values appear at the

element. But if I have a observableArray which the values are initialized in the observable array as observable too it works fine like below.

function name(name, lname)
{
    this.firstName = ko.observable(name);
    this.lastName = ko.observable(lname);
}


function AppViewModel() {

    this.name = ko.observableArray([new name("samet","caglar")]);
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

My question is should i get all the data that i receive and define each var as observable and then pass them to a observable array? Because this solution doesn't look like efficient. Maybe i am missing something?

Check out the mapping plugin if you want to automatically parse json as observables. — PW Kad

Nathan Fisher Nathan Fisher · Accepted Answer · 2013-08-06T23:51:59

If you want to have changed reflected in the model and on the screen then you will need to have the whole object observable including all its elements. Like PW Kid suggests look at the kockoutjs mapping plugin as this will reduce the amount of code you will need to write.

Using Knockout Observable Array

1 Answers