将 ko 绑定应用于局部视图答案

【问题标题】：Apply ko bindings to partial view将 ko 绑定应用于局部视图
【发布时间】：2015-04-09 02:03:29
【问题描述】：

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

页面：

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

【问题讨论】：

尝试 cleanNode(//divid) 并重新应用绑定。你试过了吗
由于 id 应该是唯一的，因此在同一页面上使用相同的 id 两次是无效的。
@WayneEllery 如果我没有明确设置 ID，那应该可以吗？
不，它只会使您的 html 有效。您是否尝试过在父级而不是在局部视图中应用绑定？
@WayneEllery 我试图避免这种情况，但这似乎是最好的选择。谢谢

标签： knockout.js partial-views

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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 也指出的那样。从长远来看，这是一种更好的方法，但部分视图也应该有效。

【讨论】：