KnockoutJS - 如何去除点击次数?

时间:2013-09-30 10:40:12

标签: knockout.js knockout-2.0 debouncing

我想改变按下按钮时默认情况发生的事情 - 我需要防止双击按钮。

一个选项是在_.once()或_.throttle()中从下划线中包含按钮绑定的函数,但如果在堆栈中处理得更高则会更好。

所以我发现了这个问题:knockoutjs overriding bindinghandlers和答案中引用的小提琴(http://jsfiddle.net/rniemeyer/PksAn/)并试图用它做点什么。以下是小提琴的原始代码。

(function(){
var originalInit = ko.bindingHandlers.click.init,
    originalUpdate = ko.bindingHandlers.click.update;

ko.bindingHandlers.click = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var wrappedValueAccessor = function() {
            return function(data, event) {
                ko.bindingHandlers.click.preOnClick.call(viewModel, data, event);
                valueAccessor().call(viewModel, data, event);
                ko.bindingHandlers.click.postOnClick.call(viewModel, data, event);
            };
        };

        originalInit(element, wrappedValueAccessor, allBindingsAccessor, viewModel);
    },
    update: originalUpdate,
    preOnClick: function(data, event) {
    },
    postOnClick: function(data, event) {
    }
};
})();

我尝试用_.throttle()包装wrappedValueAccessor,我也尝试包装嵌套函数,但事实证明valueAccessor()每次都返回一个新函数,我认为这就是我应该包装的内容。

该代码在这里:(来自于2043行的knockout-2.2.1.debug.js)

function makeValueAccessor(bindingKey) {
    return function () { return parsedBindings[bindingKey] }
}

这意味着我必须进入淘汰赛的内部,这似乎是错误的。

所以我的问题是,我在这里是正确的想法还是完全错误的做法。有更好的方法吗?

1 个答案:

答案 0 :(得分:2)

您可以创建debounce返回的处理函数的valueAccessor版本并存储它,并从wrappedValueAccessor函数返回该deboundced版本:

init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
    var debouncedAccessor = _.debounce(valueAccessor(), 800, true)
    var wrappedValueAccessor = function() {
        return debouncedAccessor;
    };        
    originalInit(element, wrappedValueAccessor, allBindingsAccessor, viewModel);
},

演示JSFiddle