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

Question

我已经实现了非常狡猾的回答的一个变种在这里生成的唯一ID,用于输入和我的淘汰赛标记相应的标签.我的最终目标是可点击的标签,而不是唯一的ID本身 - 我以前在每个标签上使用点击绑定,导航DOM以选择其输入,但这似乎是破碎和低效的.

但是,链接的解决方案不适用于单选按钮组,其中组中的每个无线电都绑定到相同的可观察对象.在我的情况下,我的无线电组是真/假(绑定回布尔可观察)或表示枚举,在这种情况下,observable保持一个整数值.所提供的解决方案导致组中的所有无线电(以及它们对应的属性标签)获得相同的ID.

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

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

Answer 1

从我的评论中,使用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>