Question

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

情况：我在我的网站上有两个偏见，我希望每个partialview都有自己的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>

我的DeliveriesPartialView：

<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的末尾尝试了两种不同的applyBinding。

任何人都有了一个想法，或者他们是一个更好的方法/模式来做到这一点？

Answer 1

页面上有JS错误吗？

nav.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”

Answer 2

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

ko.applyBindings(new MobileDeliveriesViewModel();

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

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

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

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

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

为了简单起见，您应该尝试将单个视图模型绑定到单个html部分。我发现尝试在同一个html部分中绑定两个视图模型很难正常工作并且很难拍摄。

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

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

2 个答案: