如何在淘汰赛中使用扩展器将元素 id 绑定到可观察对象？答案

【问题标题】：How to bind the element id to an observable using an extender in knockout?如何在淘汰赛中使用扩展器将元素 id 绑定到可观察对象？
【发布时间】：2013-05-04 19:31:56
【问题描述】：

我有一组复选框，每个都绑定到一个自定义的“选中”处理程序：

    <input type="checkbox" name="colours-red" data-bind="jqmCheckbox: colourRed" id="check-1" />
    <input type="checkbox" name="colours-green" data-bind="jqmCheckbox: colourGreen" id="check-2" />
    <input type="checkbox" name="colours-blue" data-bind="jqmCheckbox: colourBlue" id="check-3" />

我的视图模型很简单：

this.colourRed = ko.observable(false);
this.colourGreen = ko.observable(false);
this.colourBlue = ko.observable(false);

现在，我尝试按如下方式扩展颜色，以使其自动更新。如果情况发生变化，我需要其他订阅者收到通知：

ko.extenders.elementId = function (target, option) {
    target.elId = ko.observable();

    function setElementId(target, option) {
        target.elId(option);
    }
    target.subscribe(setElementId);
    return target;
};

在自定义绑定中，我可以获得元素 id：

ko.bindingHandlers.jqmCheckbox = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.bindingHandlers.checked.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
        // ...set this valueAccessor extender ?
    }
};

但我无法让它工作，而且我也不知道这是否可能，无论如何。如何在自定义绑定处理程序中设置我的扩展器，其中元素可用作参数？

这是 jsFiddle：http://jsfiddle.net/Tk2FZ/1/

提前致谢

【问题讨论】：

标签： jquery-mobile checkbox knockout.js custom-binding

【解决方案1】：

我不会打扰扩展器；只需在绑定处理程序中设置elId 属性即可。

ko.bindingHandlers.jqmCheckbox = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        if (!valueAccessor().elId) {
            valueAccessor().elId = ko.observable();
        }
        valueAccessor().elId(element.id);
        return ko.bindingHandlers.checked.init.apply(this, arguments);
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        return ko.bindingHandlers.checked.update.apply(this, arguments);
    }
};

代码在init 内部，因为在特定元素上初始化绑定时会调用该代码。

编辑

如果您需要 observable 立即可用，您可以为此使用扩展器（除了上面的代码）。当绑定初始化时，observable 将被更新。

ko.extenders.elementId = function (target, option) {
    target.elId = ko.observable();
    return target;
};

【讨论】：

非常感谢您的回答！到目前为止，它有效。但是，在我看来，在您的解决方案中，这个 sub-observable 仅在父绑定初始化后才可用，这就是我研究扩展程序和函数的原因。但也许我错了，或者还有其他原因，所以我刚刚更新了小提琴以更好地解释我的观点：现在我无法在另一个计算的 observable 中获取 sub-observable 的值。你是什么意思？更新：jsfiddle.net/Tk2FZ/5

【解决方案2】：

已解决：经过一段时间再次让它工作，我发现了问题。这是最后的工作小提琴：http://jsfiddle.net/z9qZc/

我把这个答案放在自己身上，以防这两分钱可以帮助其他人腾出时间。我发现这个扩展器是一个通用的解决方案，也许还不错。让我知道你的想法。

答案（现在）很清楚：初始化扩展程序（因为在大多数情况下，仔细阅读文档就足够了......）。

self.colourRed = ko.observable(true).extend({elementId:""});
self.colourGreen = ko.observable(false).extend({elementId:""});
self.colourBlue = ko.observable(false).extend({elementId:""});

感谢 Cyanfish 指出我的第一次尝试因不必要的代码而臃肿，对我帮助很大。感谢所有制作这幅精美艺术品以帮助我们所有人的淘汰者。

【讨论】：