在典型的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. RedHat Enterprise Linux 7关闭防火墙方法

    systemctl命令是系统服务管理器指令,它实际上将 service 和 chkconfig 这两个命令组合到一起 在之前的版本中关闭防火墙等服务的命令是 service iptables stop ...

  2. HTML5调用手机相机拍照

    前端调用手机相机拍照 实现方式常见有两种: 一种是通过video控件,通过捕获video的流,截取video中的图像实现拍照, 还有一种是通过input[file]控件调用移动端的摄像头,实现拍照. ...

  3. Node.js ORM 框架 sequelize 实践

    最近在做团队的一个内部系统,这次使用的nodejs web框架是团队统一的hapi.js,而数据库依然是mysql,ORM 框架选用有着6000+ stars 的 sequelize.js,hapi- ...

  4. Bootstrap自带的一些预定义的按钮颜色

    浅蓝色 btn-info 被用在那些用户可能会采取的操作上. 红色btn-danger被用来提醒用户该操作具有“破坏性”,例如删除一张猫的图片.

  5. <c:if>标签的使用-流程控制标签

    <c:if>标签必须要有test属性,${ }表达式为ture,则执行body内容;否则不执行. 原始代码: <c:if test="${all == 1}"&g ...

  6. WebBench源码分析与心得

    源码:https://github.com/EZLippi/WebBench   关键全局变量: speed 成功次数 failed 失败次数 bytes 接收字节数 benchtime 执行时长(秒 ...

  7. Java学习笔记四——运算符

    算术运算符 加减乘除(+.-.*./)就不说了. 求余运算符% 描述:第一个操作数除以第二个操作数,得到一个整除的结果后剩下的值就是余数 注意:求余预算的结果不一定总是整数,当操作数是浮点数时,结果可 ...

  8. 快速排序-java

    排序-快速排序 基本思想: 将数据划分为两部分,左边的所有元素都小于右边的所有元素:然后,对左右两边进行快速排序. 划分方法: 选定一个参考点(中间元素),所有元素与之相比较,小的放左边,大的放右边. ...

  9. phpcms V9二次开发之联动菜单筛选 包括box字段的多选 单选 筛选教程

    {php $theurl = "index.php?m=content&c=index&a=lists&catid=$catid";} {php $bran ...

  10. 基于Linux的WebSphere性能调优与故障诊断

    一.关于was数据源等问题的配置 (1)关于was数据源连接池的最大.最小配置多大合适?怎样去计算? (2)关于JVM的配置,64位系统,64位WAS,最值小和最大配置多大最优?怎样去计算? (3)应 ...