将 ko 绑定应用于局部视图

Question

我有一个 ko viewmodel。我想在同一页面上渲染局部视图两次。一次用于实际地址，一次用于邮政地址。它们具有相同的属性，只是数据不同。没有包含物理地址和邮政地址的客户端淘汰父视图模型。我正在获取下面的 "You cannot apply bindings multiple times to the same element." 摘录。我可以创建一个名为 addresses 的淘汰模型，它将同时包含物理地址和邮政地址，然后在带有 2 个 div（一个用于邮政，一个用于物理）的部分中使用 with 绑定。我猜这会起作用。但我真的不想创建父模型，除非 necessary.Any 建议？

页数：

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

Answer 1

我的建议是使用3.2.0版本引入的Knockout Components。 http://knockoutjs.com/documentation/component-registration.html

创建 Knockout 组件并发送参数中的数据一次用于物理地址，一次用于邮政地址。

Answer 2

我决定创建一个带有物理地址和邮政地址的淘汰赛父模型。然后我像这样在父页面上应用绑定：

<div id="physicalAddress">
    @Html.Partial("_Address")
</div>

<div id="postalAddress">
    @Html.Partial("_Address")
</div>

<script type="text/javascript">
var data = @(Html.Raw(Json.Encode(Model)));
var viewModel = mapParentViewModel(data);
ko.applyBindings(viewModel.viewModels().physicalAddress(), $("#physicalAddress")[0]);
ko.applyBindings(viewModel.viewModels().postalAddress(), $("#postalAddress")[0]);</script>

Answer 3

您可以使用 Knockout 中的 with 绑定将 ViewModel 的各个部分绑定到可重用的分部视图。我前一段时间写了一篇关于这个的博客文章：

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 在主 ViewModel 绑定上下文中。请注意，如果任一地址未定义或为空，地址 HTML 将不可见。

Knockout 3.2 版引入了组件的概念，@shailendra-kumar 也指出了这一点。从长远来看，这是一种更好的方法，但部分视图也应该有效。

将 ko 绑定应用于局部视图

Apply ko bindings to partial view

partial-views

knockout.js