4

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.

elcid
  • 574
  • 4
  • 10

1 Answers1

8

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/

Tuan
  • 5,382
  • 1
  • 22
  • 17
  • Thanks for fixing my fiddle. I was not aware that when you have multiple models you have to containerise the html and pass the container DOM id to the applyBindings method. Great insight..cheers! Unfortunately when I pasted you solution into my Visual Studio ASP.Net MVC4 project it didn't work. I was wondering if you could take a look at my project and suggest where I'm going I'd greatly appreciate it! Download my project on rapidshare here: https://rapidshare.com/files/2327517184/MvcHtml5Test.zip – elcid May 06 '12 at 15:08
  • Hi Tuan, ignore the last comment I made. I've now fixed the issue I was having. Your code worked fantastically but it turns out that when I copied it from JSFiddle and pasted into my file there were some invalid - albeit invisible - characters that were copied along. Moral of the story is never to copy/paste code from jsFiddle!! [Here is a link to where I found the solution](http://stackoverflow.com/questions/4404526/unexpected-token-illegal-in-webkit) for anyone else that may come across this! As for my original question, thanks a lot Tuan I'm marking your answer as the solution. – elcid May 06 '12 at 20:11