Knockout.js中使用的唯一ID;对于“;单选按钮组中的标签属性

Knockout.js unique IDs for use in "for" label attribute in radio button groups

本文关键字：单选按钮 属性 标签 对于 ID js 唯一 Knockout      更新时间：2023-10-26

我在这里实现了一个非常巧妙的答案的变体，用于为Knockout标记中的输入和相应标签生成唯一ID。我的最终目标是可点击的标签，而不是唯一的ID本身——我以前一直在每个标签上使用点击绑定来导航DOM以选择其输入，但这似乎很糟糕，效率很低。

然而，链接的解决方案不适用于单选按钮组，因为组中的每个单选按钮都绑定回相同的可观察对象。在我的情况下，我的无线电组要么是真/假（绑定回布尔可观测值），要么表示枚举，在这种情况下，可观测值包含一个整数值。所提供的解决方案导致一组中的所有无线电（以及它们对应的属性标签）获得相同的ID。

更为复杂的是，这些单选按钮集本身会出现多次。例如，可能有10个模板化的div，每个div都有一组3个单选按钮：红色、绿色、蓝色——每个单选按钮都有一个标签，我想在单击时激活相应的单选按钮。

我一直在努力修改这个解决方案，但我的大脑现在已经锁住了。欢迎有任何想法！

根据我的评论，一个使用RP绑定和修改的小提琴

ko.bindingHandlers.uniqueId = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor();
        var idMod = 'id-' + (allBindingsAccessor().uniqueMod || 0);
        value[idMod] = value[idMod] || ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter);
        element.id= value[idMod];
    },
    counter: 0,
    prefix: "unique"
};
ko.bindingHandlers.uniqueFor = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor();
        var idMod = 'id-' + (allBindingsAccessor().uniqueMod || 0);
        value[idMod] = value[idMod] || ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter);
        element.setAttribute("for", value[idMod]);
    } 
};

示例用法：

<input type="radio" data-bind="checked: gender, attr: { name: 'gender-' + id() },
     uniqueId: gender, uniqueMod: 'male'" value="1" />
<label data-bind="uniqueFor: gender, uniqueMod: 'male' ">Male</label>
<input type="radio" data-bind="checked: gender, attr: { name: 'gender-' + id() },
    uniqueId: gender, uniqueMod: 'female'" value="2" />
<label data-bind="uniqueFor: gender, uniqueMod: 'female '">Female</label>
相关文章：