Mvvm with knockout : array binding and changing inner objects state

Question

I have an array in my View Model. Items of this array are objects of Person that has two properties. when I bind this to a template it's okay. but when I change the state of one of the properties it does not reflect in UI.

what did I do wrong ?

<script type="text/html" id="person-template">
    <p>Name: <span data-bind="text: name"></span></p>
    <p>
        Is On Facebook ?
        <input type="checkbox" data-bind="checked: IsOnFacebook" />
    </p>
</script>

<script type="text/javascript">
    var ppl = [
            { name: 'Pouyan', IsOnFacebook: ko.observable(true) },
            { name: 'Reza', IsOnFacebook: ko.observable(false) }
    ];
    function MyViewModel() {
        this.people = ko.observableArray(ppl),
        this.toggle = function () {
            for (var i = 0; i < ppl.length; i++) {
                ppl[i].IsOnFacebook = false;
            }
        }
    }
    ko.applyBindings(new MyViewModel());
</script>

when I press the button I want to make changes in People.IsOnFacebook property. the changes will be made successfully but the UI does not show.

Niels · Accepted Answer · 2013-01-27 11:29:54Z

5

You should call it like a function. Like:

ppl[i].IsOnFacebook(false);

This because the ko.observable() returns a function. It's not a property you call anymore but a function call. So in the background they will update your UI. To retreive a property that is observable. You should also use the function call.

Please see this tutorial: http://learn.knockoutjs.com/#/?tutorial=intro

answered Jan 27, 2013 at 11:29

Niels

50.1k4 gold badges68 silver badges86 bronze badges

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

Collectives™ on Stack Overflow

Mvvm with knockout : array binding and changing inner objects state

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