knockout.mapping.js, Is it possible to update only a part of mapped variable?

Question

In my JS I have the following ajax call, that bind the resulting json using knockout mapping plugin.

$.getJSON("/Game/GetRack", function (data) {
    game.rack = ko.mapping.fromJS(data);
    ko.applyBindings(game.rack, $('.rack')[0]);
});

/Get/GetRack returns:

[{"Color":3,"Letter":"a","Points":5},null,null]

As you can see, there is only one object in the array. The other two are nulls.

Now using knockout mapping I can do:

ko.mapping.fromJS([null, { Color: 55, Letter: "b", Points: 88 }, null], game.rack);

Doing so correctly updates my view and now I see only a letter B on a second position. The other two are nulls.

My questions is: Can I update a value at a particular position without using mapping.fromJS?

So assuming I have a letter A at index 0, I want to change the second null to
{ Color: 55, Letter: "b", Points: 88 }
and make my UI automatically update to resemble this change. How can this be done?

---

Edit:

I decided to go with the example given by John Earles. Unfortunately I still have a problem, because my array is two dimenstional.

You have a sample here: http://jsfiddle.net/wgZ59/29/
(it's very similar to John Earles' example, but includes two dimensional array).

Can someone point out why clicking on change button does not change the values of elements? Is it also possible to change their values without calling HasMutated()?

And the last one (only if the previous two are solved). Is it possible to create html table statically (because e.g. I know that it will always be 3x3, so I want two print table with 3 rows and 3 columns and then bind each individual cell to my matrix cells. I tried that already and I had problems, because knockout didn't have the values for the cells...

---

EDIT2:

I managed to answer my above questions myself, fiddle example is here:

http://jsfiddle.net/wgZ59/44/

So, I can make a static table and bind individual cells, when I declare the array this way:

self.matrix = ko.observableArray([[0,0,0],[0,0,0],[0,0,0]]);

or

self.matrix = ko.observableArray([[,,],[,,],[,,]]);.

I can update the values and it works for a static table, but it does not work for a dynamic table (created dynamically by knockout). You can see the behavior on the fiddle page (link at the beginning of this edit). Do you know why pressing "change" button does not update the values in a dynamically created table?

Answer 1

I don't know exactly what you are trying to do, but if game.rack is an observableArray then you can manipulate it using JavaScript.

Here is the documentation page on observableArrays:

http://knockoutjs.com/documentation/observableArrays.html

That page shows the available "helper" methods that are available on the observableArray itself. Additionally you can manipulate the underlying array, but then you have to call 'valueHasMutated()' on the observableArray to let any registered listeners know about the changes.

Here is a simple JSFiddle showing manipulation:

http://jsfiddle.net/jearles/wgZ59/8/