Knockout.js multiple observable arrays not working?

Question

Evening all.

I have been experimenting for the first time with Knockout.js and i am having issues with multiple knockout arrays in the same page.

http://jsfiddle.net/573Vc/

eg

var linksBinding = ko.applyBindings(new LinksViewModel());
var tasksBinding = ko.applyBindings(new TasksViewModel());

The above jsfiddle shows how the top "Tasks" are working great and if i remove all code / html that relate to tasks then the links will also work fine on their own. When i add them to the same page however the second one starts to fail. Can anyone shed any light? It complains that parameters are not defined when i know they are?

Thanks

Answer 1

I'm not a knockout expert. However, I believe that you can only bind once to a specific element. The document is the default element if none is specified in the binding. So, in your case, you're doing two bindings (ie applyBindings()) but you don't specify an element so only one binding takes place.

Check out this fiddle (note, I added jquery so that I could use jquery to access the element.)

I simply added an id to each div and updated the bindings to specifically bind to each element.

<div id="tasks" class='app-panel-section' data-bind="foreach: taskCategories">

  ...
    var tasksBinding = ko.applyBindings(new TasksViewModel(),$("#tasks")[0]);