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"