在典型的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. step by step 之餐饮管理系统七(点菜模块实现)

    好长时间没有更新这个系列了,一是因为这段时间比较忙,有很多事情,二来要学习新的东西,AngularJs,devExpress这两上框架,都是比较有名的框架,先上图: 上面就是用来点菜的界面,左边是已点 ...

  2. what is a ear

    http://docs.oracle.com/javaee/6/tutorial/doc/bnaby.html An EAR file (see Figure 1-6) contains Java E ...

  3. IOS竖屏应用单个页面横屏的解决办法

    昨天朋友问我,怎么实现在竖屏的应用里,显示一个横屏的应用,由于也没做过 就说不知道了,但是我觉得会有这样的API ,因为我手机里就安装有这种类型的软件 今天早上起来,就想做一个Demo出来,惯例的是查 ...

  4. 数据库SQL语句中根据当前日期计算其他日期小结

    问题描述:我们在写存储过程和函数的时候经常会碰到利用当前日期计算出上周开始日期.结束日期,或者计算上个月的开始日期结束日期等问题.最近写了几个存储过程和函数,其中都涉及到了日期计算问题,在这里简单做一 ...

  5. 基于Axure的快速原型方法

    Axure是一个专业的快速原型设计工具,让负责定义需求和规格.设计功能和界面的专家能够快速创建应用软件或Web网站的线框图.流程图.原型和规格说明文档.作为专业的原型设计工具,它能快速.高效的创建原型 ...

  6. 练习1-23:删去C语言程序中所有的注释语句(C程序设计语言 第2版)

    #include <stdio.h> main() { FILE * fp_i; FILE * fp_o; fp_i = fopen("input.txt", &quo ...

  7. mac下配置openCV

    预备工作: 1.下载Homebrew  在Terminal中输入: ruby -e "$(curl -fsSkL raw.github.com/mxcl/homebrew/go)" ...

  8. Ubuntu 初始化Root账户密码

    昨晚新装的Ubuntu12(电脑太烂了),每次都记不住初始化root密码的命令,既然决定开始写自己的园子了,那就在自己的园子里面记一下,方便自己稳固之心 好了,不废话了了 draenei@ubuntu ...

  9. DownloadManager

    在androi中,volley适合小文件的获取和大并发,如果支持大文件的下载可以用Android原生的DownloadManager.DownloadManager默认支持多线程下载.断点续传等. 基 ...

  10. node(thrift)

    thrift是一种跨语言的RPC框架,据说uber采在node.js项目中采用thrfit后,比原有的http+json的方式提高近20倍的性能. 所谓的RPC本质上就是客户端将需要调用的方法名和参数 ...