将绑定应用于相同的 DOM 元素组答案

【问题标题】：Applying Bindings to Identical Groups of DOM Elements将绑定应用于相同的 DOM 元素组
【发布时间】：2015-01-16 03:29:59
【问题描述】：

我有一个视图，在同一页面上呈现了一堆相同表单，并且我想让 Knockout 的数据绑定适用于页面上的每个表单。

我在 主视图 上呈现所有表单 - 每个表单都在其自己的 PartialView 中，如下所示：

@Model Forms.Models.ViewModels.MasterViewModel

@foreach (var form in Model.Form.ToList())
{
    Html.RenderPartial("_Form", form);
}

但是因为所有的表单都是相同的，所以它们都使用相同的数据绑定，并且 MVC 使用相同的 ID 呈现它们：

局部视图：

@Html.LabelFor(m => m.foo)
@Html.TextBoxFor(m => m.foo, new { @class = "form-control", data_bind = "value: foo" })
@Html.ValidationMessageFor(m => m.foo)

我可以做些什么来将 Knockout 的绑定应用到页面上的每个表单，或者这是不能做的事情（例如，因为 MVC 不介意用相同的 ID 渲染 HTML inputs )?

【问题讨论】：

真的有必要反复渲染表单吗？您可以将一个 observable（比如 selectedItem）绑定到表单的一个实例。然后使用当前需要呈现的任何数据更新 selectedItem 可观察对象的值。
根据我的要求，每个单独的表单都呈现为 jQuery Accordion 中的面板。 Accordion 可能有两个或多个具有相同表单的面板，每个表单都有相同的输入 ID/名称，所以我不确定 Knockout ViewModel 将如何工作。

标签： jquery asp.net-mvc knockout.js

【解决方案1】：

在不知道您的数据是如何建模的情况下，这里只是在黑暗中拍摄。

在此，我假设所有表单数据都包含在一个映射中，可以由服务器端模型中表示的某些关键字段引用。

@foreach (var form in Model.Form.ToList())
{
    <!-- ko with: items[@form.Key] -->
    Html.RenderPartial("_Form", form);
    <!-- /ko -->
}

在该示例中，您可能有一个代表所有模型的对象：

ko.applyBindings(formData); //assuming formData.items

如果你只需要数组而不需要容器，你可以稍微修改一下：

@foreach (var form in Model.Form.ToList())
{
    <!-- ko with: @parent[@form.Key] -->
    Html.RenderPartial("_Form", form);
    <!-- /ko -->
}

...

ko.applyBindings(items);

【讨论】：

我的模型目前不是这样设置的，但看起来必须这样，这不是一个坏主意。但是，如果我事先不知道给定表单将在视图上呈现多少次，ko.applyBindings 如何使用这种设置？
好吧，如果数据没有足够的模型用于表单，那么就会出现绑定错误。与渲染表单的数量相比，模型过多当然不是问题。查看更新以回答。
我将您的答案标记为正确（它确实回答了如何将绑定应用于多个相同表单的问题：使用 ko with:），但我仍然不确定 Knockout ViewModel 将如何工作。相当复杂的东西。