0

如何将淘汰赛绑定到相同输入字段的多个实例？我有一个编辑器模板，它在隐藏的 div 中呈现 7 个普通输入字段，然后我使用 jQuery .after() 将它们显示在我想要的位置：
编辑器模板：

@model ProductRepAttributeViewModel
@{
    // Get the prefix and use it for the knockout field names
    var htmlFieldPrefix = ViewData.TemplateInfo.HtmlFieldPrefix;

    var idx1 = htmlFieldPrefix.IndexOf("Products", StringComparison.Ordinal);
    var koProductPrefix = htmlFieldPrefix.Insert(idx1 + "Products".Length, "()");

    var idx2 = koProductPrefix.IndexOf("ProductRepAttributes", StringComparison.Ordinal);
    var koPrefix = koProductPrefix.Insert(idx2 + "ProductRepAttributes".Length, "()");

    var dictTextBoxAttrs = new Dictionary<string, object>
    {
        { "style", "width: 80%;" },
        { "data-bind", string.Format("value: currentBatch.{0}.Value", koPrefix) }
    };
}
<div class="Expressed" style="width: 10%; display: block; float: left;">
    @Html.TextBoxFor( model => model.Value, dictTextBoxAttrs )
    @Html.ValidationMessageFor(model => model.Value)
</div>

jQuery：

$('.expressed-container').after($('.Expressed'));

剃刀：

<div style="display: none">
    @Html.EditorFor(x => x.ProductRepAttribute)
</div>

<div style="padding-top: 20px; padding-bottom: 20px" class="grid_12">
<div style="width: 8%; display: block; float: left;">
    @Html.Label("Start", labelStyleDict)
</div>
<div class ="encoded-container"></div>
<div style="width: 10%; display: block; float: left;">
    @Html.Label("End", labelStyleDict)
</div>
</div>

呈现的 HTML：

<input type="text" value="" style="width: 80%;" name="Products[0].ProductRepAttributes[0].Value" id="Products_0__ProductRepAttributes_0__Value" data-bind="value: currentBatch.Products()[0].ProductRepAttributes()[0].Value">
<!-- 6 more fields indexed 1 to 6 -->

一切都很好 - 这些字段出现在我的“编码容器”div之后，并且命名正确并且必然会被淘汰。现在我需要在不同的选项卡中显示相同的字段，因此当一个字段更新时，另一个选项卡上的等效字段也应该更新。
我将 Razor 代码（没有 EditorFor 调用）复制并粘贴到第二个选项卡中，这些字段看起来很好，并且具有与原始集相同的名称/ID（尽管我知道字段应该具有唯一的 ID），但是只有最后一个渲染的一组字段势必会被淘汰。如何绑定两组字段？我还尝试使用 jQuery clone()、.insertAfter() 和 appendTo() 来尝试克隆或复制字段，但这些都不起作用。

我可以使用部分视图而不是编辑器模板，但这将涉及为所有 7 个字段手动编写代码，我不想这样做。编辑器模板解决方案很简洁，效果很好，所以我想继续使用它。

4

1 回答 1

1

好的，找到了问题 - 花了一个小时写了这个问题，然后在 5 分钟内解决了它！首先在 jQuery 中，我使用 appendTo() 而不是 after()。这并没有解决问题，但后来我意识到我正在调用 appendTo()after来初始化我的淘汰赛模型，这意味着只有一组字段可供淘汰赛绑定。所以运行 appendTo()before我绑定了模型意味着多个字段就位，所以敲除找到它们并正确绑定它们。

经验教训 - 如果可以，我可以将问题留给可能有类似问题的任何人。

于 2012-12-06T10:50:17.657 回答