與淘汰賽和ASP.NET MVC4 SPA多的ViewModels

Question

我新的ASP.NET MVC SPA和Knockout.js OS也許這是一個簡單的錯誤我犯了......

情況：我有兩個partialviews在我的網站，我希望每個partialview都有他自己的Knockout ViewModel，所以我不會得到一個巨大的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')); 

我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> 

我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> 

我DeliveriesPartialView：

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

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

如果我運行它，它不會承認的BAR2 propertie在我BarFooViewModel ...

我已經試過2個不同的applyBindings在我的ViewModel結束。

任何人有一個想法或是他們的更好的方式/模式來做到這一點？

Answer 1

頁面上有JS錯誤嗎？

nav.params（）。查看 但是params：{view：'deliveries'，deliveryId：null} - 它不是函數。

如果你想在單個頁面上使用幾個視圖模型 - 檢查這個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。你必須使用「stopBinding」

Answer 2

它看起來像你應用多個數據綁定到相同的部分。

ko.applyBindings(new MobileDeliveriesViewModel(); 

這將綁定到頁面上的所有元素。

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

這將嘗試綁定到所有元素的DIV

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

這裏面也將嘗試綁定到div內的所有元素。

爲了簡單起見，您應該嘗試將單個視圖模型綁定到單個html部分。我發現試圖在同一個HTML部分中綁定兩個視圖模型一直很難正確工作並排除故障。

Jack128的回答也有一些好處。