1

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

    <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/

提前致谢

4

2 回答 2

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;
};
于 2013-05-05T16:46:42.960 回答
0

已解决：在再次花费一些时间让它工作后，我发现了问题。这是最后的工作小提琴：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 指出我的第一次尝试因不必要的代码而臃肿，并帮助了我很多。感谢所有制作这幅精美艺术品以帮助我们所有人的淘汰赛人。

于 2013-05-11T08:32:23.647 回答