首页 文章

ASP.NET MVC 3 - 在knockout中绑定同一字段的多个实例

提问于
浏览
0

如何将knockout绑定到相同输入字段的多个实例?我有一个编辑器模板,在隐藏的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 -->

所有罚款和花花公子 - 字段出现在我的"encoded-container" div之后,并且被正确命名并绑定到淘汰赛 . 现在我需要在不同的选项卡中显示相同的字段,因此当一个字段更新时,另一个选项卡上的等效字段也应该更新 .
我将Razor代码(没有EditorFor调用)复制并粘贴到第二个选项卡中,字段显示正常并且与原始集合具有相同的名称/ ID(虽然我知道字段应该具有唯一ID),但是只有最后一个渲染的一组字段必然会被淘汰 . 如何绑定两组字段?我也尝试使用jQuery clone(),. insertIfter()和appendTo()来尝试克隆或复制字段,但这些都不起作用 .

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

1 回答

  • 0

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

    获得的经验教训 - 如果可以,我可以在这里留下可能存在类似问题的人的问题 .

相关问题