1

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

情况：我的网站中有两个局部视图，我希望每个局部视图都有自己的 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>

我的客户部分视图：

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

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

4

2 回答 2

2

页面上是否有 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动作。你必须使用“stopBinding”

于 2012-10-04T10:48:59.283 回答
0

看起来您正在将多个数据绑定应用于相同的部分。

ko.applyBindings(new MobileDeliveriesViewModel();

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

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

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

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

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

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

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

于 2012-10-04T11:05:16.833 回答