将ko绑定应用于局部视图(Apply ko bindings to partial view)

将ko绑定应用于局部视图(Apply ko bindings to partial view)

我有一个ko viewmodel。 我想在同一页面上渲染两次局部视图。 一次用于物理地址，一次用于邮政地址。 它们具有相同的属性，数据只是不同。 没有包含物理地址和邮政地址的客户端淘汰父视图模型。 我得到了“您不能将绑定多次应用于同一元素”。 下面摘录。 我可以创建一个称为地址的挖空模型，它将包含物理和邮政地址，然后使用带有2个div的部分绑定（一个用于邮政，一个用于物理）。 我猜这会起作用。 但我不想创建一个父模型，除非必要。任何建议？

页：

@Html.Partial("_Address", Model.PhysicalAddress) @Html.Partial("_Address", Model.PostalAddress)

部分：

@model Models.AddressDetailsViewModel <div id="myDiv"> <table class="my-table"> <tr> <td id="postalCode"> <span data-bind="text: props.postalCode"> </span> </td> </tr> </table> </div> <script type="text/javascript"> var data = @(Html.Raw(Json.Encode(Model))); var viewModel = mapAddress(data); ko.applyBindings(viewModel, $("#myDiv")[0]); </script>

I have a ko viewmodel. I want to render a partial view twice on the same page. Once for physical address and once for postal address. They have the same properties, the data is just different. There is no client side knockout parent view model which contains both physical and postal addresses. I'm getting the "You cannot apply bindings multiple times to the same element." Extract below. I could create a knockout model called addresses which will contain both physical and postal and then use the with binding in a partial with 2 divs (one for postal, one for physical). I'm guessing that will work. But i don't really want to create a parent model unless necessary.Any suggestions?

Page:

@Html.Partial("_Address", Model.PhysicalAddress) @Html.Partial("_Address", Model.PostalAddress)

Partial:

@model Models.AddressDetailsViewModel <div id="myDiv"> <table class="my-table"> <tr> <td id="postalCode"> <span data-bind="text: props.postalCode"> </span> </td> </tr> </table> </div> <script type="text/javascript"> var data = @(Html.Raw(Json.Encode(Model))); var viewModel = mapAddress(data); ko.applyBindings(viewModel, $("#myDiv")[0]); </script>

最满意答案

您可以在Knockout中使用with binding将视图模型的一部分绑定到可重用的局部视图。 我早就写了一篇关于这个博客的文章：

https://conficient.wordpress.com/2013/03/07/knockout-multiple-viewmodels-and-reusable-partial-views/

我在示例代码中实际使用了地址作为示例，所以您应该会发现这会有很大帮助。 在你的例子中，你会这样做：

<div data-bind-"with: physicalAddress"> @Html.Partial("_Address") </div> <div data-bind-"with: postalAddress"> @Html.Partial("_Address") </div>

这假定这两个DIV在主视图模型绑定上下文中。 请注意，如果任一地址未定义或为空，则地址HTML将不可见。

Knockout 3.2版引入了组件的概念，正如@ shailendra-kumar所指出的那样。 从长远来看，这是一个更好的方法，但部分视图也应该起作用。

You can use the with binding in Knockout to bind parts of a viewmodel to a reusable partial view. I wrote a blog article about this a while back:

https://conficient.wordpress.com/2013/03/07/knockout-multiple-viewmodels-and-reusable-partial-views/

I actually used addresses as the example in my sample code so you should find this helps a lot. In your sample you would do it this way:

<div data-bind-"with: physicalAddress"> @Html.Partial("_Address") </div> <div data-bind-"with: postalAddress"> @Html.Partial("_Address") </div>

This assumes that the two DIVs are within the main viewmodel binding context. Note that if either address is undefined or null, the address HTML won't be visible.

Knockout version 3.2 introduced the concept of components as @shailendra-kumar has also pointed out. In the longer term this is a better approach, but partial views should also work.