在典型的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.
};

KnockoutJS 3.X API 第五章 高级应用(4) 自定义处理逻辑的更多相关文章

  1. KnockoutJS 3.X API 第五章 高级应用(3) 虚拟元素绑定

    注意:这是一种高级技术,通常仅在创建可重用绑定的库时使用. 这不是你通常需要做的时候使用Knockout构建应用程序. Knockout的控制流绑定(例如,if和foreach)不仅可以应用于常规DO ...

  2. KnockoutJS 3.X API 第五章 高级应用(5) 使用预处理扩展Knockout绑定语法

    注意:这是一种高级技术,通常仅在创建可重用绑定或扩展语法的库时使用. 这不是你通常需要做的时候使用Knockout构建应用程序. 从Knockout 3.0开始,开发人员可以通过提供在绑定过程中重写D ...

  3. KnockoutJS 3.X API 第五章 高级应用(2) 控制后代绑定

    注意:这是一种高级技术,通常仅在创建可重用绑定的库时使用. 默认情况下,绑定仅影响它们应用到的元素. 但是如果你想影响所有的后代元素呢? 为此,只需从绑定的init函数中返回{controlsDesc ...

  4. KnockoutJS 3.X API 第五章 高级应用(1) 创建自定义绑定

    您不仅限于使用内置的绑定,如click,value绑定等,您可以创建自己的绑定. 这是如何控制视图模型如何与DOM元素进行交互,并且为您提供了大量的灵活性,以便于以复用的方式封装复杂的行为. 注册绑定 ...

  5. KnockoutJS 3.X API 第四章(13) template绑定

    目的 template绑定(模板绑定)使用渲染模板的结果填充关联的DOM元素. 模板是一种简单方便的方式来构建复杂的UI结构 . 下面介绍两种使用模板绑定的方法: 本地模板是支持foreach,if, ...

  6. KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器

    无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...

  7. KnockoutJS 3.X API 第三章 计算监控属性(5) 参考手册

    计算监控属性构造参考 计算监控属性可使用以下形式进行构造: ko.computed( evaluator [, targetObject, options] ) - 这种形式是创建一个计算监控属性最常 ...

  8. KnockoutJS 3.X API 第四章 数据绑定(5) 控制流component绑定

    本节目录: 一个例子 API 备注1:仅模板式的component 备注2:component虚拟绑定 备注3:传递标记到component绑定 内存管理 一个例子 First instance, w ...

  9. KnockoutJS 3.X API 第七章 其他技术(7) 微任务

    注意:本文档适用于Knockout 3.4.0及更高版本. Knockout的微任务队列 Knockout的微任务队列支持调度任务尽可能快地运行,同时仍然是异步的,努力安排它们在发生I / O,回流或 ...

随机推荐

  1. [UCSD白板题] Number of Inversions

    Problem Introduction An inversion of a sequence \(a_0,a_1,\cdots,a_{n-1}\) is a pair of indices \(0 ...

  2. [UCSD白板题] Huge Fibonacci Number modulo m

    Problem Introduction The Fibonacci numbers are defined as follows: \(F_0=0\), \(F_1=1\),and \(F_i=F_ ...

  3. #知识#室内设计原理ing

    室内设计原理 第一章 室内设计的含义和基本观点 人的一生,绝大部分时间是在室内度过的,因此,人们设计创造的室内环境,必然会直接关系到室内生活.生产活动的质量,关系到人们的安全.健康.效率.舒适等等.室 ...

  4. SqlIO优化

    1SqlIO优化 set statistics io on--sqlset statistics io off 2Sql占用CPU时间 select c.total_worker_time, c.la ...

  5. 用c解决的小题目

    判断计算机的大.小端存储方式 1 int main() { ; char* p=(char*)&a; ) printf("little\n");//小端存储:高位存在地地址 ...

  6. 基于ABP的应用执行Update-Database出现异常的解决办法

    今天在QQ群中看到有网友在更新数据库执行Update-Database时出现下面的错误: 为了能让搜索引擎搜索到,特意加上该错误的文字说明: 在与 SQL Server 建立连接时出现与网络相关的或特 ...

  7. android知识杂记(二)

    记录项目中的android零碎知识点,用以备忘. AsyncQueryHandler 继承与handler,可以用于处理增删改(ContentProvider提供的数据) 例如:query = new ...

  8. 【转】 Nginx深入详解之多进程网络模型

    [转自]http://blog.chinaunix.net/uid-22312037-id-3974068.html 一.进程模型        Nginx之所以为广大码农喜爱,除了其高性能外,还有其 ...

  9. Linux3:more、which、find、chmod、tar、diff、grep、ps、netstat、uname

    more 类似cat,不过more不是将整个文件内容从上到下显示在屏幕上的,而是以一页一页的显示方便使用者逐页阅读.more最基本的指令就是space即往下翻一页,b即往回翻一页显示,而且还有搜索字符 ...

  10. DOM扩展札记

    Selector API HTML5 DOM扩展 Element Traversal规范 Selector API 众多JavaScript库中,最常用的一个功能就是根据css选择符选择与某个模式匹配 ...