Question

我有一个ko viewmodel。我想在同一页面上渲染两次局部视图。一次是物理地址，一次是邮寄地址。它们具有相同的属性，数据只是不同。没有客户端淘汰父视图模型，其中包含物理和邮政地址。我得到了＆＃34;你不能多次对同一个元素应用绑定。＆＃34;提取下面。我可以创建一个名为地址的淘汰模型，它将包含物理和邮政，然后使用带有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>

Answer 1

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

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

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

Answer 2

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

创建Knockout组件并在参数中发送一次物理地址和一次邮寄地址数据。

Answer 3

我决定创建一个带有物理和邮政地址的淘汰父模型。然后我在父页面上应用绑定，如下所示：

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

将ko绑定应用于局部视图

3 个答案: