knockout.js - knockoutjs 覆盖绑定(bind)处理程序

Question

嗨，我正在尝试设置 ko，以便在任何被调用的单击处理程序上运行一些自定义代码。
将一些前置和后置代码添加到“点击”绑定(bind)处理程序的最简单方法是什么？

Answer 1

您可以创建包装 click 的自定义绑定(bind)。绑定(bind)或保存对原始 init 的引用和 update click 的功能绑定(bind)并替换真实的。

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

您的绑定(bind)可能如下所示:

(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.preOnClick或 ko.bindingHandlers.click.postOnClick
这是一个示例: http://jsfiddle.net/rniemeyer/PksAn/

如果您需要在更新函数中运行自定义代码，那么您可以将其拆分并在那里运行您的前置和后置代码并执行 originalUpdate介于两者之间。