knockoutjs覆盖绑定处理程序

时间:2012-01-25 11:45:07

标签: knockout.js

您好我正在尝试设置ko以便在任何单击处理程序上调用一些自定义代码运行。 什么是向“点击”绑定处理程序添加一些前置和后置代码的最简单方法?

1 个答案:

答案 0 :(得分:16)

您可以创建包装click绑定的自定义绑定,也可以保存对init绑定的原始updateclick函数的引用,并替换实际之一。

您可以选择在update函数中执行一些代码,这些代码将在更新模型值时触发(通过init函数中附加的事件处理程序或以编程方式触发)或执行代码作为实际的处理程序。听起来像你想要后者。

您的绑定可能如下所示:

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

    ko.bindingHandlers.click = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel, context) {
            var wrappedValueAccessor = function() {
                return function(data, event) {
                   //run some pre code
                   ko.bindingHandlers.click.preOnClick.call(viewModel, data, event);

                   valueAccessor().call(viewModel, data, event);

                   //run some post code
                   ko.bindingHandlers.click.postOnClick.call(viewModel, data, event);
                };

            };

            originalInit(element, wrappedValueAccessor, allBindingsAccessor, viewModel, context);
        },
        update: originalUpdate,
        preOnClick: function(data, event) {
            alert("pre code for " + data.id);
        },
        postOnClick: function(data, event) {
            alert("post code for " + data.id);
        }
    };
})();

我拆分了前/后代码,以便在运行时覆盖ko.bindingHandlers.click.preOnClickko.bindingHandlers.click.postOnClick

以下是一个示例:http://jsfiddle.net/rniemeyer/PksAn/

如果您需要在更新功能中运行自定义代码,则可以将其拆分并在那里运行前置和后置代码,并在其间执行originalUpdate