KnockoutJS 3.X API 第五章 高级应用(4) 自定义处理逻辑

在典型的Knockout应用程序中,DOM元素是动态添加和删除的,例如使用模板绑定或通过控制流绑定(if,ifnot,with和foreach)。 当创建自定义绑定时,通常需要添加清除逻辑,当Knockout删除与您的自定义绑定相关联的元素时,该逻辑运行。

在处理元素时注册回调

要注册要删除节点时要运行的函数,可以调用ko.utils.domNodeDisposal.addDisposeCallback(node,callback)。 例如,假设您创建自定义绑定以实例化窗口小部件。 当具有绑定的元素被删除时,您可能想要调用窗口小部件的destroy方法:

ko.bindingHandlers.myWidget = {
    init: function(element, valueAccessor) {
        var options = ko.unwrap(valueAccessor()),
            $el = $(element);
 
        $el.myWidget(options);
 
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            // This will be called when the element is removed by Knockout or
            // if some other part of your code calls ko.removeNode(element)
            $el.myWidget("destroy");
        });
    }
};

覆盖外部数据的清理

当删除一个元素时,Knockout运行逻辑来清理与该元素相关的任何数据。 作为这个逻辑的一部分,如果jQuery在页面中加载,Knockout调用jQuery的cleanData方法。 在高级方案中,您可能希望阻止或自定义在应用程序中如何删除此数据。 Knockout公开了一个函数,ko.utils.domNodeDisposal.cleanExternalData(node),可以重写以支持自定义逻辑。 例如,为了防止调用cleanData,可以使用空函数来替换标准的cleanExternalData实现:

ko.utils.domNodeDisposal.cleanExternalData = function () {
    // Do nothing. Now any jQuery data associated with elements will
    // not be cleaned up when the elements are removed from the DOM.
};
posted @ 2016-10-17 09:48  SmallProgram  阅读(1257)  评论(0编辑  收藏  举报