注意:这是一种高级技术,通常仅在创建可重用绑定或扩展语法的库时使用。 这不是你通常需要做的时候使用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. GERBER文件

    GERBER文件 GERBER文件是一种国际标准的光绘格式文件,它包含RS-274-D和RS-274-X两种格式,其中RS-274-D称为基本GERBER格式,并 要同时附带D码文件才能完整描述一张图 ...

  2. btn-default

    Bootstrap 还有一种属于按钮的 class 属性叫做btn-default . to

  3. MySQL数据导出

    1,打开命令行窗口“运行”-->输入CMD 2,进入自己MySQL Server安装目录的bin目录(我的安装目录如下) cd C:\Program Files\MySQL\MySQL Serv ...

  4. mono for android 各版本下载地址

    window下 在XamarinStudio 检查更新,会在这个目录下生成LOG和下载文件,所以可以从里面复制出来,查看真实下载地址 C:\Users\用户名\AppData\Local\Xamari ...

  5. ASP.NET 导出gridview中的数据到Excel表中,并对指定单元格换行操作

    1. 使用NPOI读取及生成excel表. (1)导出Click事件: 获取DataTable; 给文件加文件名: string xlsxName = "xxx_" + DateT ...

  6. NSThread 子线程 Cocoa NSOperation GCD(Grand Central Dispatch) 多线程

    单词:thread 英 θred:n 线.思路.vt 穿过.vi 穿透过 一.    进程.线程 进程:正在进行中的程序被称为进程,负责程序运行的内存分配,每一个进程都有自己独立的虚拟内存空间 线程: ...

  7. C# 装箱和拆箱的简单理解

    一.装箱拆箱的意义 主要用途是可以向ArrayList中添加值类型的元素 二.理解 装箱的含义:理解为可以将子类对象隐式的转化为父类对象(保留自己特有的成员,和子类重写的成员) 装箱:例子为典型的装箱 ...

  8. iOS 直播类APP开发流程分解:

    1 . 音视频处理的一般流程: 数据采集→数据编码→数据传输(流媒体服务器) →解码数据→播放显示1.数据采集:摄像机及拾音器收集视频及音频数据,此时得到的为原始数据涉及技术或协议:摄像机:CCD.C ...

  9. 循环处理--sqlserver

    alter PROCEDURE [dbo].[sp_gongzi] @gongzi_yf varchar(7) as DECLARE  @input_id varchar(20)DECLARE  @s ...

  10. MediaWiki安装与配置(Ubuntu 10.4)

    实验室准备发布一个网站,本来是准备外包给别人做的,后来自己调研了一下,发现也没有想象的复杂和困难,于是最近一周自己吭哧吭哧地把网站搭好了. 之所以使用Mediawiki,一是考虑到是以实验室发布,不想 ...