淘汰赛 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 不显眼的验证，它需要一个名称属性来验证.我想为两个字段分配相同的名称，以便能够输出验证消息.是否可以在两个字段上使用相同的 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 添加属性时，它们都具有相同的名称Type"并且验证不起作用.它们需要被索引，比如 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屋！