淘汰JS"uniqueName"绑定-两个字段具有相同的名称 [英] Knockout JS "uniqueName" binding - Same name to two fields

问题描述

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

I am using Knockout JS to create an editor. I am using the foreach property to loop around a list in my model.

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

我正在使用JQuery非侵入式验证，它需要一个name属性来进行验证.我想为两个字段分配相同的名称，以便能够输出验证消息.可以在两个字段上使用相同的uniqueName属性吗?

I am using JQuery unobtrusive validation whichneeds a name property to validate. I want to assign the same name to two fields, in order to be able to output a validation message. Is it possible to use the same uniqueName property on two fields?

 <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非侵入式验证.但是我无法解决如何将验证消息与输入字段链接

Ive copied the example below which shows grid editing and JQuery unobtrusive validation. But i cant work out how to link the validation message with the input field

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

我将带有Razor语法的ASP.NET MVC3用于循环输入.

I am using ASP.NET MVC3 with Razor syntax for the loop input.

 @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等.

I cant figure out how to update the name property. When i add a property using knokcout they all have the same name "Type" and the validation doesn't work. They need to be indexed some how Type1 Type2 etc.

推荐答案

uniqueName绑定仅增加索引并设置名称(带有IE修复程序).

The uniqueName binding just increments an index and sets the name (with a fix for 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);
        }
    }
};

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

So, you can create a custom binding that uses the last index and sets the appropriate attribute

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

现在，您只需使用它即可:

Now, you would just use it like:

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

这篇关于淘汰JS"uniqueName"绑定-两个字段具有相同的名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！