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

Question

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

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

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

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

Answer 1

根据我的评论，a fiddle使用 RP 的修改绑定(bind)

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>