Multiple ViewModels with Knockout and ASP.NET MVC4 SPA

Question

I'm new to ASP.NET MVC SPA and Knockout.js os maybe it's a simple mistake I made...

Situation: I have two partialviews in my website and I want that every partialview has his own Knockout ViewModel so I won't get a huge ViewModel.

My current ViewModel:

/// <reference path="../_references.js" />

function MobileDeliveriesViewModel() {
   var self = this;

   // Data
   self.currentDelivery = ko.observable();
   self.nav = new NavHistory({
      params: { view: 'deliveries', deliveryId: null }
   });

   // Test
   self.foo = "FooBar"
   self.bar = "BarFoo"

   self.nav.initialize({ linkToUrl: true });

   // Navigate Operations
   self.showDeliveries = function () { self.nav.navigate({ view: 'deliveries' }) }
   self.showCustomers = function () { self.nav.navigate({ view: 'customers' }) }
}

function BarFooViewModel() {
   var self = this
   //MobileDeliveriesViewModel.call(self)

   self.bar2 = "BarFooTwo"
}

ko.applyBindings(new MobileDeliveriesViewModel());
ko.applyBindings(new MobileDeliveriesViewModel(), $('#BarFoo')[0]);
ko.applyBindings(new BarFooViewModel(), document.getElementById('BarFoo'));

My Index.cshtml:

<div data-bind="if: nav.params().view == 'deliveries'">
   @Html.Partial("_DeliveriesList")
</div>

<div class="BarFoo" data-bind="if: nav.params().view == 'customers'">
   @Html.Partial("_CustomersList")
</div>

<script src="~/Scripts/App/DeliveriesViewModel.js" type="text/javascript"></script>

My CustomerPartialView:

<div id="BarFoo" class="content">
   <p data-bind="text: bar"></p>
   <p data-bind="text: bar2"></p>

   <button data-bind="click: showDeliveries, css: { active: nav.params().view == 'deliveries' }">Deliveries</button>
</div>

My DeliveriesPartialView:

<div class="content">
   <p data-bind="text: foo"></p>

   <button data-bind="click: showCustomers, css: { active: nav.params().view == 'customers' }">Customers</button>
</div>

If I run this, it won't recognize the bar2 propertie in my BarFooViewModel...

I have tried 2 different applyBindings at the end of my ViewModel.

Anybody got an idea or is their a better way/pattern to do this?

Answer 1

are there JS errors on page?

nav.params().view but params: { view: 'deliveries', deliveryId: null } - it's not function.

and if you want use a few view models on single page - check this http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+KnockMeOut+%28Knock+Me+Out%29 acticle. you have to use "stopBinding"

Answer 2

It looks like you are applying multiple data bindings to the same sections.

ko.applyBindings(new MobileDeliveriesViewModel();

This will bind to all elements one the page.

ko.applyBindings(new MobileDeliveriesViewModel(), $('#BarFoo')[0]);

this will try to bind to all elements inside the div

ko.applyBindings(new BarFooViewModel(), document.getElementById('BarFoo'));

This will also try to bind to all elements inside the div.

To keep things simple, you should try to bind a single view model to a single html section. I've found that trying to bind two view models in the same html section has been hard to get work correctly and trouble shoot.

Jack128's answer also makes some good points.