Knockout JS"uniqueName"绑定 - 两个字段的名称相同

min*_*son 3 knockout.js

我正在使用Knockout JS创建一个编辑器.我使用foreach属性循环我的模型中的列表.

 <tbody data-bind='foreach: Properties'>
Run Code Online (Sandbox Code Playgroud)

我正在使用JQuery不显眼的验证,需要一个名称属性来验证.我想为两个字段分配相同的名称,以便能够输出验证消息.是否可以在两个字段上使用相同的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>
Run Code Online (Sandbox Code Playgroud)

我复制了下面的示例,其中显示了网格编辑和JQuery不显眼的验证.但我无法弄清楚如何将验证消息与输入字段链接

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

编辑:

我使用带有Razor语法的ASP.NET MVC3进行循环输入.

 @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" })
Run Code Online (Sandbox Code Playgroud)

我无法弄清楚如何更新名称属性.当我使用knokcout添加属性时,它们都具有相同的名称" 类型 ",并且验证不起作用.他们需要索引Type1 Type2等.

RP *_*yer 7

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);
        }
    }
};
Run Code Online (Sandbox Code Playgroud)

因此,您可以创建使用最后一个索引的自定义绑定并设置适当的属性

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

现在,您只需使用它:

<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>
Run Code Online (Sandbox Code Playgroud)