注意:这是一种高级技术,通常仅在创建可重用绑定或扩展语法的库时使用。 这不是你通常需要做的时候使用Knockout构建应用程序。

从Knockout 3.0开始,开发人员可以通过提供在绑定过程中重写DOM节点和绑定字符串的回调来定义自定义语法。

预处理绑定字符串

您可以通过为特定绑定处理程序(例如click,visible或任何自定义绑定处理程序)提供绑定预处理程序,来挂钩Knockout的逻辑来解释数据绑定属性。

为此,将预处理函数附加到绑定处理程序:

ko.bindingHandlers.yourBindingHandler.preprocess = function(stringFromMarkup) {
// Return stringFromMarkup if you don't want to change anything, or return
// some other string if you want Knockout to behave as if that was the
// syntax provided in the original HTML
}

具体参数请参见本页后面的API参考。

示例1:设置绑定的默认值

如果你抛弃一个绑定的值,它的默认绑定到未定义。 如果要为绑定具有不同的默认值,可以使用预处理器。 例如,您可以允许通过将uniqueName的默认值设置为true来绑定不带值的值:

ko.bindingHandlers.uniqueName.preprocess = function(val) {
return val || 'true';
}

现在你可以这样绑定:

<input data-bind="value: someModelProperty, uniqueName" />

示例2:将表达式绑定到事件

如果您希望能够将表达式绑定到单击事件(而不是Knockout期望的函数引用),则可以为单击处理程序设置预处理器以支持此语法:

ko.bindingHandlers.click.preprocess = function(val) {
return 'function($data,$event){ ' + val + ' }';
}

现在你可以这样绑定click:

<button type="button" data-bind="click: myCount(myCount()+1)">Increment</button>

绑定预处理器引用

ko.bindingHandlers.<name>.preprocess(value, name, addBindingCallback)

如果定义,在评估绑定之前,将为每个<name>绑定调用此函数。

参数:

  • value: Knockout尝试解析绑定值之前的语法(例如,对于Binding:1 + 1,关联值为“1 + 1”作为字符串)。

  • name: 绑定的名称(例如,对于您的Binding:1 + 1,名称是“yourBinding”作为字符串)。

  • addBinding: 一个回调函数,您可以选择使用在当前元素上插入另一个绑定。 这需要两个参数,名称和值。 例如,在你的预处理函数中,调用addBinding('visible','acceptsTerms()'); 使Knockout表现得好像该元素上有一个visible:acceptsTerms()绑定。

返回值:

您的预处理函数必须返回要解析并传递到绑定的新字符串值,或返回undefined以删除绑定。
例如,如果你返回'value +“.toUpperCase()”'作为字符串,那么你的Binding:“Bert”会被解释为标记包含你的Binding:“Bert”.toUpperCase()。 Knockout将以正常方式解析返回的值,因此它必须是一个合法的JavaScript表达式。
不返回非字符串值。 这没有意义,因为标记总是一个字符串。

预处理DOM节点

你可以通过提供一个节点预处理器来钩入Knockout的逻辑来遍历DOM。 这是一个函数,Knockout将为它遍历的每个DOM节点调用一次,无论是在UI首次绑定时,还是在注入任何新的DOM子树(例如,通过foreach绑定)时。

为此,请在绑定提供程序上定义preprocessNode函数:

ko.bindingProvider.instance.preprocessNode = function(node) {
// Use DOM APIs such as setAttribute to modify 'node' if you wish.
// If you want to leave 'node' in the DOM, return null or have no 'return' statement.
// If you want to replace 'node' with some other set of nodes,
// - Use DOM APIs such as insertChild to inject the new nodes
// immediately before 'node'
// - Use DOM APIs such as removeChild to remove 'node' if required
// - Return an array of any new nodes that you've just inserted
// so that Knockout can apply any bindings to them
}

示例3:虚拟模板元素

如果你通常使用虚拟元素包含模板内容,正常的语法可以感觉有点冗长。 使用预处理,您可以添加使用单个注释的新模板格式:

ko.bindingProvider.instance.preprocessNode = function(node) {
// Only react if this is a comment node of the form <!-- template: ... -->
if (node.nodeType == 8) {
var match = node.nodeValue.match(/^\s*(template\s*:[\s\S]+)/);
if (match) {
// Create a pair of comments to replace the single comment
var c1 = document.createComment("ko " + match[1]),
c2 = document.createComment("/ko");
node.parentNode.insertBefore(c1, node);
node.parentNode.replaceChild(c2, node); // Tell Knockout about the new nodes so that it can apply bindings to them
return [c1, c2];
}
}
}

现在,您可以在视图中包含一个模板,如下所示:

<!-- template: 'some-template' -->

预处理API

ko.bindingProvider.instance.preprocessNode(node)

如果已定义,将在处理绑定之前为每个DOM节点调用此函数。 该功能可以修改,删除或替换节点。 任何新节点必须在节点之前立即插入,并且如果添加了任何节点或节点被删除,则函数必须返回现在在文档中代替节点的新节点的数组。

KnockoutJS 3.X API 第五章 高级应用(5) 使用预处理扩展Knockout绑定语法的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. KnockoutJS 3.X API 第六章 组件(3) 组件绑定

    组件绑定将指定的组件注入到元素中,并且可选地将参数传递给它. 本节目录 一个例子 API 组件生命周期 备注1:仅限模板组件 备注2:使用没有容器元素的组件 备注3:将标记传递给组件 处置和内存管理 ...

  7. KnockoutJS 3.X API 第四章(14) 绑定语法细节

    data-bind绑定语法 Knockout的声明性绑定系统提供了一种简洁而强大的方法来将数据链接到UI. 绑定到简单的数据属性或使用单个绑定通常是容易和明显的. 对于更复杂的绑定,它有助于更好地了解 ...

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

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

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

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

随机推荐

  1. Sublime Text 3 Install Markdown Preview Plugins

    Sublime Text 3 Install Markdown Preview Plugins. [TOC] 前言 什么是Markdown Markdown是一种可以使用普通文本编辑器编写的标记语言, ...

  2. SVN修改用户名与密码

    由于在svn的界面中并没有为我们提供直接更换用户名密码的地方,所以一旦我们需要更换用户名的就需要自己想一些办法. 解决方案如下: 在Eclipse使用SVN的过程中大多数人往往习惯把访问SVN的用户名 ...

  3. Android中Handler 、Thread和Runnable之间的关系

    在多线程编程的时候,我们经常会用到Handler,Thread和Runnable这三个类,我们来看看这三个类之间是怎么样的关系? 首先说明Android的CPU分配的最小单元是线程,Handler一般 ...

  4. Mini projects #5 ---- Memory

    课程全名:An Introduction to Interactive Programming in Python,来自 Rice University 授课教授:Joe Warren, Scott ...

  5. 多线程NSThread基本用法

        #import "ViewController.h" @interface ViewController () @end @implementation ViewContr ...

  6. cobbler 配置(转载)

    Cobbler介绍 Cobbler 是一个系统启动服务(boot server),可以通过网络启动(PXE)的方式用来快速安装.重装物理服务器和虚拟机,支持安装不同的 Linux 发行版和 Windo ...

  7. Security Configuration and Auditing Scripts for Oracle E-Business Suite (文档 ID 2069190.1)

    This document provides the security configuration and auditing scripts for Oracle E-Business Suite. ...

  8. XP退役了,如何把Win7变成XP风格?| 怎么样去掉Win7的所有华丽效果? | 怎么样让Win7达到电脑最佳性能?

    XP系统退役了,以后微软停止XP系统的更新维护了. 不得不升级使用Windows7系统,但是大部分使用Windows7不习惯. 那是因为你的操作习惯,还保持在XP风格基础上. 那么有没有什么办法让Wi ...

  9. Replication的犄角旮旯(一)--变更订阅端表名的应用场景

    <Replication的犄角旮旯>系列导读 Replication的犄角旮旯(一)--变更订阅端表名的应用场景 Replication的犄角旮旯(二)--寻找订阅端丢失的记录 Repli ...

  10. 解决Ubuntu Server 12.04 在Hyper-v 2012 R2中不能使用动态内存的问题

    前言 全新Hyper-v 2012 R2终于开始支持在Linux的VPS中使用动态内存,可以大大优化服务器的资源分配,小弟我兴奋不已,于是抽空时间赶紧升级到 2012 R2,好好整理一番内存分配,不过 ...