具有 Knockout 和 ASP.NET MVC4 SPA 的多个 ViewModel答案

【问题标题】：Multiple ViewModels with Knockout and ASP.NET MVC4 SPA具有 Knockout 和 ASP.NET MVC4 SPA 的多个 ViewModel
【发布时间】：2012-09-25 08:51:46
【问题描述】：

我是 ASP.NET MVC SPA 和 Knockout.js os 的新手，也许这是我犯的一个简单错误...

情况：我的网站中有两个局部视图，我希望每个局部视图都有自己的 Knockout ViewModel，这样我就不会得到一个巨大的 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>

我的交付部分视图：

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

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

如果我运行它，它将无法识别我的 BarFooViewModel 中的 bar2 属性...

我在 ViewModel 的末尾尝试了 2 种不同的 applyBindings。

有人有想法还是他们有更好的方法/模式来做到这一点？

【问题讨论】：

标签： asp.net-mvc knockout.js asp.net-mvc-4 single-page-application asp.net-spa

【解决方案1】：

页面是否有 JS 错误？

nav.params().view 但 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”

【讨论】：

谢谢，文章很有用

【解决方案2】：

您似乎正在将多个数据绑定应用到相同的部分。

ko.applyBindings(new MobileDeliveriesViewModel();

这将绑定到页面上的所有元素。

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

这将尝试绑定到 div 内的所有元素

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

这也将尝试绑定到 div 内的所有元素。

为简单起见，您应该尝试将单个视图模型绑定到单个 html 部分。我发现尝试在同一个 html 部分中绑定两个视图模型很难正常工作和排除故障。

Jack128 的回答也提出了一些好处。

【讨论】：

这是我的错误，最后一行应该注释掉。