CODEWITHSUNDEEP
knockout.js
Richard Banks
Richard Banks

Reputation: 2983

knockout not updating dom when items changed in an observable array

Im playing with knockout at the moment and have come across a problem with an observable array.

It seems that its not updating the dom when i change any of the values inside the array. Strange thing is, if i add a new element its reflected on the screen, but if i change the value after it still shows the original value

<div data-bind="text: ObvArray().length"></div>

<table>
    <tbody data-bind="foreach: ObvArray">
        <tr>
            <td><input data-bind="value: name"/></td>
        </tr>
    </tbody>
</table>

<button data-bind="click: addEl">Add Element</button>

<div data-bind="foreach: ObvArray">
    <div data-bind="text: name"></div>
</div>

function MyFirstVM(){
    this.ObvArray = ko.observableArray([
        {name: "Test 1"},
        {name: "Test 2"},
        {name: "Test 3"}
    ]);

    this.PrintTestProp = function(){
        return this.TestProp();
    }

    this.addEl = function(){
        this.ObvArray.push({name: "Another Test"})
    }
}

ko.applyBindings(new MyFirstVM());

Heres my fiddle. Simply clicking the buttonm should add a new element. This works fine however if i change the value in the text fields its not reflected in the dom below the button

http://jsfiddle.net/EUC27/

Upvotes: 1

Views: 2398

Answers (1)

Alexandros B
Alexandros B

Reputation: 1891

You need to make the items of the array observable too

    this.ObvArray = ko.observableArray([
        {name: ko.observable("Test 1")},
        {name: ko.observable("Test 2")},
        {name: ko.observable("Test 3")}
    ]);

Upvotes: 1

Related Questions