天天看点

KnockoutJS 3.X API 第七章 其他技术(5) 使用其他事件处理程序

在大多数情况下,数据绑定属性提供了一种干净和简洁的方式来绑定到视图模型。 然而,事件处理是一个常常会导致详细数据绑定属性的领域,因为匿名函数通常是传递参数的推荐技术。 例如:

作为替代,Knockout提供了两个帮助函数,它们允许您标识与DOM元素关联的数据:

<code>ko.dataFor(element)</code> - 返回可用于与元素绑定的数据

<code>ko.contextFor(element)</code> - 返回DOM元素可用的整个绑定上下文

这些帮助函数可以在事件处理程序中使用,这些事件处理程序使用类似于jQuery的绑定或单击的方式地附加。 上面的函数可以连接到每个链接一个删除类,如:

更好的是,这种技术可以用于支持事件委托。 jQuery live / delegate / on函数是一个简单的方法来实现这一点:

现在,单个事件处理程序在更高级别附加,并处理与remove类的任何链接的点击。 此方法还具有自动处理动态添加到文档的附加链接(可能是由于项目添加到observableArray的结果)的额外好处。

此示例显示父级和子级的多个级别上的“add”和“remove”链接,每个类型的链接具有单个处理程序。

UI源码:

视图模型源码:

无论嵌套链接如何嵌套,处理程序总是能够识别和操作适当的数据。 使用这种技术,我们可以避免将处理程序附加到每个链接的开销,并可以保持标记清洁和简洁。

作者:smallprogram

出处:

http://www.cnblogs.com/smallprogram

感谢您的阅读。喜欢的、有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力。欢迎转载!另外,文章在表述和代码方面如有不妥之处,欢迎批评指正。留下你的脚印,欢迎评论!