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

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

编辑：

我使用 ASP.NET MVC3 和 Razor 语法作为循环输入。

 @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 和淘汰模块有关，但我必须更改

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 属性并将输入名称绑定到此属性以及 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>