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

Question

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

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

我正在使用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>

我复制了下面的示例，展示了网格编辑和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" })

我无法弄清如何更新名称属性。当我使用Knockout添加属性时，它们都具有相同的名称“Type”，因此验证不起作用。它们需要以某种方式进行索引，例如Type1、Type2等。

- ministrymason

Answer 1

唯一名称绑定只是增加索引并设置名称（修复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>

- RP Niemeyer

---

如果使用IE6或IE7，这将始终用输入元素替换该元素？我同时使用选择和输入字段。我的问题是，我正在使用ASP.NET MVC3 Razor语法，但我无法弄清如何更新名称属性。如果您能帮忙，我已经更新了问题。 - ministrymason

它不会用input替换它，只是合并属性。我会查看你的更新。 - RP Niemeyer

谢谢。我已经在这个问题上忙了一整天了，终于把其他所有的问题都解决了，除了验证中的这个名称问题。 - ministrymason

好的- 您可以添加 uniqueName 绑定，然后使用自定义的 valMsg 绑定将 data-valmsg-for 添加到下一个字段。 - RP Niemeyer

谢谢你的示例 :) 我非常感激。 - ministrymason

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

- Skarsnik

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

- Obed

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>

- Mauri