ノックアウトJS "ユニークネーム"バインディング - 2つのフィールドの同じ名前

Question

ノックアウトJSを使用してエディタを作成しています。私はモデルのリストの周りをループするforeachプロパティを使用しています。

<tbody data-bind='foreach: Properties'> 

私はJQueryの邪魔にならない検証を使用しています。検証にはnameプロパティが必要です。検証メッセージを出力できるように、2つのフィールドに同じ名前を割り当てる必要があります。 2つのフィールドで同じuniqueNameプロパティを使用できますか？

<tr> 
    <td> 
     <input data-bind='value: type, uniqueName: true' data-val = "true", data-val-required = "The Type field is required" /></td> 
    </td> 
</tr> 
<tr> 
    <td class="field-validation-valid" data-valmsg-for="UNIQUENAME" data-valmsg-replace="true"></td> 
</tr> 

グリッド編集とJQueryの邪魔にならない検証を示す以下の例をコピーしました。私はループ入力用カミソリ構文とASP.NET MVC3を使用しています

：しかし、私は、入力フィールドで

http://knockoutjs.com/examples/gridEditor.html

編集を検証メッセージをリンクする方法を考え出す傾けます。

@Html.DropDownList("Type", new SelectList(types, "Value", "Text"), "Select", new { data_bind = "value: Type", data_val = "true", data_val_required = "The Type field is required" }) 

私はnameプロパティを更新する方法を見つけ出す傾けます。 knokcoutを使ってプロパティを追加すると、すべて同じ名前の "Type"となり、検証は機能しません。彼らはタイプ1 Type2などのいくつかの方法でインデックスを作成する必要があります。

Answer 1

uniqueNameバインディングはインデックスを増分し、名前を設定します（IEの修正あり）。

それは次のようになります。

：だから

ko.bindingHandlers['uniqueName'] = { 
    'init': function (element, valueAccessor) { 
     if (valueAccessor()) { 
      element.name = "ko_unique_" + (++ko.bindingHandlers['uniqueName'].currentIndex); 

      // Workaround IE 6/7 issue 
      // - https://github.com/SteveSanderson/knockout/issues/197 
      // - http://www.matts411.com/post/setting_the_name_attribute_in_ie_dom/ 
      if (ko.utils.isIe6 || ko.utils.isIe7) 
       element.mergeAttributes(document.createElement("<input name='" + element.name + "'/>"), false); 
     } 
    } 
}; 

、あなたはそれが最後のインデックスを使用し、適切な属性今

ko.bindingHandlers.valmsg = { 
    init: function(element) { 
     element.setAttribute("data-valmsg-for", "ko_unique_" + ko.bindingHandlers.uniqueName.currentIndex); 
    } 
}; 

を設定し、カスタムバインディングを作成することができ、あなただけのようにそれを使用します

<tr> 
    <td> 
     <input data-bind='value: type, uniqueName: true' data-val="true", data-val-required="The Type field is required" /> 
    </td> 
</tr> 
<tr> 
    <td class="field-validation-valid" data-bind="valmsg: true" data-valmsg-replace="true"></td> 
</tr> 

Answer 2

おそらく、RP-Niemeyerの優れた解決策から導かれたより簡単なアプローチです。

<span class="field-validation-valid" data-bind='attr: {"data-valmsg-for": "ko_unique_" + ko.bindingHandlers.uniqueName.currentIndex}' data-valmsg-replace="true" /> 

Answer 3

は、あなたのポストのためにあなたに非常に多くのRPニーマイヤーをありがとう...私はコメントとして投稿したかったが、私の評判は低すぎます。

これはrequirejsとノックアウトモジュールとは何かを持っている場合、私は知りませんが、私は

ko.bindingHandlers.uniqueName.Zb 

に

ko.bindingHandlers.uniqueName.currentIndex 

を変更しなければならなかったので、今私が持っている：

define(["knockout"], function(ko) { 
    ko.bindingHandlers.valmsg = { 
     init: function (element) { 
      element.setAttribute("data-valmsg-for", "ko_unique_" + ko.bindingHandlers.uniqueName.Zb); 
     } 
    }; 
}); 

Answer 4

子要素にControlName属性を追加し、入力名をthisに、データvalms-forをo

<input type="number" class="form-control" data-bind="value: myValue, valueUpdate: 'afterkeydown', attr: {ControlName}" required /> 
<span class="field-validation-valid" data-bind='attr: {"data-valmsg-for":ControlName}' data-valmsg-replace="true"></span>