knockout array binding not working

Question

monkeyStuff does what i want, it updates the span content if i write in the input field. But why doesn't it work with the voteStuff?

See it in Action: Fiddle

<body>
    <div id="monkeyStuff">
        <input type="text" data-bind="value:monkey" />
        <span data-bind="text:monkey"></span>
    </div>
    <hr>
    <div id="voteStuff">
        <div data-bind="text: test"></div>
        <ul data-bind="foreach: voters">
          <li>
            <input type="text" data-bind="value:name" />
            <span data-bind="text:name"></span>
          </li>
        </ul>
    </div>

    <script>        
        var vm = {
            monkey: ko.observable()
        };
        vm.monkey("Quak");
        ko.applyBindings(vm, document.getElementById('monkeyStuff'));

        var model = {
            test: 'Test address text',
            voters: ko.observableArray([
                { name: 'First Voter' },
                { name: 'Second Voter' }
            ])
        };

        ko.applyBindings(model, document.getElementById('voteStuff') );

    </script>
</body>

EDIT: OK it works like this:

  voters: ko.observableArray([
        { name: ko.observable('First Voter') },
        { name: ko.observable('Second Voter') }
    ])

But is there a way to do it automatic for each property in the voters array?

if the only action you're going to do on the observable array is adding/removing items, then making the name property an observable is not needed ( it is only needed if the voter name will change later ), otherwise, if you want to automatically convert all objects before pushing them into your observableArray, then you can use the mapping plugin — Anas Nakawa
– Anas Nakawa, Commented Aug 17, 2014 at 7:40

PaulDapolito · Accepted Answer · 2014-08-15 13:14:55Z

2

You need to make the name property of the elements in your voters ko.observableArray also observable, which would thus allow you to alter these properties with the bindings you have implemented:

    voters: ko.observableArray([
        { name: ko.observable('First Voter') },
        { name: ko.observable('Second Voter') }
    ])

Working example: http://jsfiddle.net/he2zoa3d/2/

answered Aug 15, 2014 at 13:14

PaulDapolito

8246 silver badges12 bronze badges

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

6 Comments

user2834172 Over a year ago

you're working example doesn't work =) but i got it.

user2834172 Over a year ago

but this voter array is only for testing, what if i get a big array. is there a way to do this automatic for each property?

PaulDapolito Over a year ago

Sorry about the link issue, I was unsure how to update your code and then share a new link to the updated code. Nonetheless, it's fixed in my answer above.

PaulDapolito Over a year ago

You should create some JavaScript object Voter that has an observable data member name. Then, you can even expand your Voter class later-on to add functionality!

user2834172 Over a year ago

But i get this array from json through breezejs and in the array there is a name, no, address and 30 more.. and then i only have the customer view.. so isn't there a simpler way? maybe a for each function to observer each property in the array..?

|

Collectives™ on Stack Overflow

knockout array binding not working

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related