Knockout.js fails to bind when I use two models on a page

Question

I have two models: ServiceViewModel and ReservationsViewModel; both are based on the tutorials found at learn.knockoutjs.com.

The problem I'm having is that when my webpage loads only the ServiceViewModel is bound. The control that are bound to ReservationViewModel display nothing! I'm new to knockout.js and have looked for a solution but to no avail.

When I remove the binding to ServiceViewModel the control that bind to ReservationsViewModel bind properly (i.e. display the data) so not sure what is going on here. It seems to me like knockout.js doesn't allow more that one viewmodel on a page but that would be silly and such a major limitation that i surmise it is not the issue!

Here is a link to my fiddle: http://jsfiddle.net/zsg6b/ You will see that even in JSFiddle the binding does not work.

When I run the project in Visual Studio Internet Explorer and Google Chrome I get the following same error:

runtime error: Unable to parse bindings. Message: ReferenceError: 'seats' is undefined; Bindings value: foreach: seats

What have I done wrong? Please checkout my jsfiddle.

PS: this is my first stackoverflow post so please be gentle! :)

Thank you.

Answer 1

When you have more than one viewmodel on a page, you need to specify in your applyBindings call which part of the page each viewmodel applies to.

I've fixed your fiddle by wrapping the service and reservations sections into separate containers, then specifying them in the applyBindings call: http://jsfiddle.net/zsg6b/1/