knockout.js - 将 ko 绑定(bind)应用于局部 View

Question

我有一个 ko View 模型。我想在同一页面上两次呈现局部 View 。一次用于实际地址，一次用于邮政地址。它们具有相同的属性，只是数据不同。没有包含物理地址和邮政地址的客户端 knockout 父 View 模型。我收到“您不能多次将绑定(bind)应用于同一个元素”。摘录如下。我可以创建一个名为addresses 的 knockout 模型，该模型将包含物理和邮政，然后在带有2个div的部分中使用with绑定(bind)(一个用于邮政，一个用于物理)。我猜这会奏效。但除非必要，否则我真的不想创建父模型。有什么建议吗？

页:

@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

您可以使用 with在 Knockout 中绑定(bind)以将 ViewModel 的一部分绑定(bind)到可重用的局部 View 。不久前，我写了一篇关于此的博客文章:
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 绑定(bind)上下文中。请注意，如果任一地址未定义或为空，则地址 HTML 将不可见。
正如@shailendra-kumar 所指出的那样，Knockout 3.2 版引入了组件的概念。从长远来看，这是一种更好的方法，但部分观点也应该有效。