如何将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 回答
好的发现问题 - 花了一个小时写问题然后在5分钟内解决了!首先在jQuery中我使用了appendTo()而不是after() . 这并没有解决问题,但后来我意识到我正在调用appendTo()
after
初始化我的淘汰模型,这意味着只有一组用于敲除绑定的字段 . 所以运行appendTo()before
我绑定模型意味着多个字段就位,所以knockout找到它们并正确绑定它们 .获得的经验教训 - 如果可以,我可以在这里留下可能存在类似问题的人的问题 .