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

すべてうまくてダンディ-フィールドは私の「encoded-container」divの後に表示され、正しく名前が付けられ、ノックアウトにバインドされています。ここで、同じフィールドを別のタブに表示する必要があるため、一方のフィールドが更新されると、もう一方のタブの同等のフィールドも更新される必要があります。
Razorコード（EditorFor呼び出しなし）をコピーして2番目のタブに貼り付けたところ、フィールドは正常に表示され、元のセットと同じ名前/ IDになっています（ただし、フィールドには一意のIDがあるはずです）が、最後のレンダリングされたフィールドのセットはノックアウトにバインドされます。両方のフィールドセットをバインドするにはどうすればよいですか？また、jQuery clone（）、. insertAfter（）、およびappendTo（）を使用してフィールドのクローンを作成またはコピーしようとしましたが、これらはいずれも機能しません。

エディターテンプレートの代わりに部分ビューを使用することもできますが、7つのフィールドすべてのコードを手動で作成する必要があり、これは実行したくありません。Editor Templateソリューションはきちんとしていてうまく機能するので、これからも使い続けたいと思います。

4

1 に答える 1

1

問題を見つけました-1時間かけて質問を書き、5分で解決しました！まず、jQueryではafter（）の代わりにappendTo（）を使用しました。これで問題は解決しませんでしたがafter、ノックアウトモデルを初期化するappendTo（）を呼び出していることに気付きました。つまり、ノックアウトをバインドするフィールドのセットは1つだけでした。したがって、appendTo（）beforeを実行してモデルをバインドすると、複数のフィールドが配置され、ノックアウトがそれらを検出して正しくバインドします。

教訓-問題がなければ、同様の問題を抱えている可能性のある人のために、ここに質問を残すことができます。

于 2012-12-06T10:50:17.657 に答える