Question

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

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

我正在使用JQuery不显眼的验证，需要使用name属性进行验证。我想为两个字段分配相同的名称，以便能够输出验证消息。是否可以在两个字段上使用相同的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不显眼的验证。但我无法弄清楚如何将验证消息与输入字段

相关联

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" })

我无法弄清楚如何更新name属性。当我使用knokcout添加属性时，它们都具有相同的名称“类型”，并且验证不起作用。他们需要索引一些Type1 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 Niemeyer为您的帖子。

我不知道这是否与requirejs和knockout模块有关，但我不得不改变

ko.bindingHandlers.uniqueName.currentIndex

到

ko.bindingHandlers.uniqueName.Zb

所以现在我有：

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和data-valms-for

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

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

4 个答案: