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

Question

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

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

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

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

Answer 1

根据我的评论，a fiddle 使用 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>