KnockoutJS 3.X API 第五章 高级应用(5) 使用预处理扩展Knockout绑定语法
注意:这是一种高级技术,通常仅在创建可重用绑定或扩展语法的库时使用。 这不是你通常需要做的时候使用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绑定语法的更多相关文章
- KnockoutJS 3.X API 第五章 高级应用(3) 虚拟元素绑定
注意:这是一种高级技术,通常仅在创建可重用绑定的库时使用. 这不是你通常需要做的时候使用Knockout构建应用程序. Knockout的控制流绑定(例如,if和foreach)不仅可以应用于常规DO ...
- KnockoutJS 3.X API 第五章 高级应用(2) 控制后代绑定
注意:这是一种高级技术,通常仅在创建可重用绑定的库时使用. 默认情况下,绑定仅影响它们应用到的元素. 但是如果你想影响所有的后代元素呢? 为此,只需从绑定的init函数中返回{controlsDesc ...
- KnockoutJS 3.X API 第五章 高级应用(4) 自定义处理逻辑
在典型的Knockout应用程序中,DOM元素是动态添加和删除的,例如使用模板绑定或通过控制流绑定(if,ifnot,with和foreach). 当创建自定义绑定时,通常需要添加清除逻辑,当Knoc ...
- KnockoutJS 3.X API 第五章 高级应用(1) 创建自定义绑定
您不仅限于使用内置的绑定,如click,value绑定等,您可以创建自己的绑定. 这是如何控制视图模型如何与DOM元素进行交互,并且为您提供了大量的灵活性,以便于以复用的方式封装复杂的行为. 注册绑定 ...
- KnockoutJS 3.X API 第四章 数据绑定(5) 控制流component绑定
本节目录: 一个例子 API 备注1:仅模板式的component 备注2:component虚拟绑定 备注3:传递标记到component绑定 内存管理 一个例子 First instance, w ...
- KnockoutJS 3.X API 第六章 组件(3) 组件绑定
组件绑定将指定的组件注入到元素中,并且可选地将参数传递给它. 本节目录 一个例子 API 组件生命周期 备注1:仅限模板组件 备注2:使用没有容器元素的组件 备注3:将标记传递给组件 处置和内存管理 ...
- KnockoutJS 3.X API 第四章(14) 绑定语法细节
data-bind绑定语法 Knockout的声明性绑定系统提供了一种简洁而强大的方法来将数据链接到UI. 绑定到简单的数据属性或使用单个绑定通常是容易和明显的. 对于更复杂的绑定,它有助于更好地了解 ...
- KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器
无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...
- KnockoutJS 3.X API 第三章 计算监控属性(5) 参考手册
计算监控属性构造参考 计算监控属性可使用以下形式进行构造: ko.computed( evaluator [, targetObject, options] ) - 这种形式是创建一个计算监控属性最常 ...
随机推荐
- chrome 浏览器 手动同步书签 && 安装离线插件
现在查的很严,所以使用chrome浏览器 同步功能不是特别好,就算是FQ也会出现 同步延迟的情况,所以定时使用手动同步还是很靠谱的行为,就在网上找了下,借鉴下.亲测可用. 在Chrome浏览器没有一个 ...
- new的原罪
一直以为在开发阶段能够直接调用的,速度而言一定是最优秀的,因为总比后期通过反射之类来调用来得快吧. 下面请看一个SB的例子,重新编译以后,这个类在创建100,000,000实体时居然耗费了16秒的时间 ...
- VC 单文档视图分割
http://blog.csdn.net/smartwhitehorse/article/details/6707183 主要使用类:CSplitterWnd 问题:分割线的固定,需要重写CSplit ...
- 7.4 MVC vs MVP
MVC(Model_view_contraller)"模型_视图_控制器". MVC应用程序总是由这三个部分组成.Event(事件)导致Controller改变Model或View ...
- Async/Await FAQ
From time to time, I receive questions from developers which highlight either a need for more inform ...
- poj 3067 - Japan(树状数组)
先按第一个数从大到小排序,相等的情况下,第二个数按照从大到小排序..... 预处理后,照着树状数组写就行了... 注意:k的最大值应取1000*1000 代码如下: include <cstdi ...
- HTML5-表单的创建
<!-- 文本-->, <!-- 复选框-->,<!-- 单选按钮-->, <!-- 下拉菜单,select:选择,option:选项--> <! ...
- C++混合编程之idlcpp教程Lua篇(7)
上一篇在这 C++混合编程之idlcpp教程Lua篇(6) 第一篇在这 C++混合编程之idlcpp教程(一) 与LuaTutorial4工程相似,工程LuaTutorial5中,同样加入了四个文件: ...
- @MappedSuperclass的用法
实体类baseEntity.java package com.rock.cft.hibernate; import java.util.Date; import javax.persistence.G ...
- .NET Core下使用gRpc公开服务(SSL/TLS)
一.前言 前一阵子关于.NET的各大公众号都发表了关于gRpc的消息,而随之而来的就是一波关于.NET Core下如何使用的教程,但是在这众多的教程中基本都是泛泛而谈,难以实际在实际环境中使用,而该篇 ...