KnockoutJS 3.X API 第七章 其他技术(5) 使用其他事件处理程序
2016-10-19 11:05
239 查看
在大多数情况下,数据绑定属性提供了一种干净和简洁的方式来绑定到视图模型。 然而,事件处理是一个常常会导致详细数据绑定属性的领域,因为匿名函数通常是传递参数的推荐技术。 例如:
作为替代,Knockout提供了两个帮助函数,它们允许您标识与DOM元素关联的数据:
这些帮助函数可以在事件处理程序中使用,这些事件处理程序使用类似于jQuery的绑定或单击的方式地附加。 上面的函数可以连接到每个链接一个删除类,如:
更好的是,这种技术可以用于支持事件委托。 jQuery live / delegate / on函数是一个简单的方法来实现这一点:
现在,单个事件处理程序在更高级别附加,并处理与remove类的任何链接的点击。 此方法还具有自动处理动态添加到文档的附加链接(可能是由于项目添加到observableArray的结果)的额外好处。
UI源码:
视图模型源码:
无论嵌套链接如何嵌套,处理程序总是能够识别和操作适当的数据。 使用这种技术,我们可以避免将处理程序附加到每个链接的开销,并可以保持标记清洁和简洁。
<a href="#" data-bind="click: function() { viewModel.items.remove($data); }"> remove </a>
作为替代,Knockout提供了两个帮助函数,它们允许您标识与DOM元素关联的数据:
ko.dataFor(element)- 返回可用于与元素绑定的数据
ko.contextFor(element)- 返回DOM元素可用的整个绑定上下文
这些帮助函数可以在事件处理程序中使用,这些事件处理程序使用类似于jQuery的绑定或单击的方式地附加。 上面的函数可以连接到每个链接一个删除类,如:
$(".remove").click(function () { viewModel.items.remove(ko.dataFor(this)); });
更好的是,这种技术可以用于支持事件委托。 jQuery live / delegate / on函数是一个简单的方法来实现这一点:
$(".container").on("click", ".remove", function() { viewModel.items.remove(ko.dataFor(this)); });
现在,单个事件处理程序在更高级别附加,并处理与remove类的任何链接的点击。 此方法还具有自动处理动态添加到文档的附加链接(可能是由于项目添加到observableArray的结果)的额外好处。
示例:嵌套子节点
此示例显示父级和子级的多个级别上的“add”和“remove”链接,每个类型的链接具有单个处理程序。UI源码:
<ul id="people" data-bind='template: { name: "personTmpl", foreach: people }'> </ul> <script id="personTmpl" type="text/html"> <li> <a class="remove" href="#"> x </a> <span data-bind='text: name'></span> <a class="add" href="#"> add child </a> <ul data-bind='template: { name: "personTmpl", foreach: children }'></ul> </li> </script>
视图模型源码:
var Person = function(name, children) { this.name = ko.observable(name); this.children = ko.observableArray(children || []); }; var PeopleModel = function() { this.people = ko.observableArray([ new Person("Bob", [ new Person("Jan"), new Person("Don", [ new Person("Ted"), new Person("Ben", [ new Person("Joe", [ new Person("Ali"), new Person("Ken") ]) ]), new Person("Doug") ]) ]), new Person("Ann", [ new Person("Eve"), new Person("Hal") ]) ]); this.addChild = function(name, parentArray) { parentArray.push(new Person(name)); }; }; ko.applyBindings(new PeopleModel()); //attach event handlers $("#people").on("click", ".remove", function() { //retrieve the context var context = ko.contextFor(this), parentArray = context.$parent.people || context.$parent.children; //remove the data (context.$data) from the appropriate array on its parent (context.$parent) parentArray.remove(context.$data); return false; }); $("#people").on("click", ".add", function() { //retrieve the context var context = ko.contextFor(this), childName = context.$data.name() + " child", parentArray = context.$data.people || context.$data.children; //add a child to the appropriate parent, calling a method off of the main view model (context.$root) context.$root.addChild(childName, parentArray); return false; });
无论嵌套链接如何嵌套,处理程序总是能够识别和操作适当的数据。 使用这种技术,我们可以避免将处理程序附加到每个链接的开销,并可以保持标记清洁和简洁。
相关文章推荐
- KnockoutJS 3.X API 第七章 其他技术(2) 使用扩展器来增加可观察量(监控属性)
- KnockoutJS 3.X API 第七章 其他技术(8) 异步错误处理
- KnockoutJS 3.X API 第七章 其他技术(6) 使用“fn”添加自定义函数
- KnockoutJS 3.X API 第七章 其他技术(7) 微任务
- KnockoutJS 3.X API 第七章 其他技术(3) 延迟更新
- KnockoutJS 3.X API 第七章 其他技术(4) 速率限制
- js使用函数绑定技术改变事件处理程序的作用域
- js使用函数绑定技术改变事件处理程序的作用域
- KnockoutJS 3.X API 第七章 其他技术(1) 加载和保存JSON数据
- MOSS 2007 应用随笔(19)-- 使用SPEventHandler事件处理程序(三)在文档库中应用事件处理程序
- 使用HTML页面和一般处理程序模拟ASP.NET WebForms中的事件
- KnockoutJS 3.X API 第三章 计算监控属性(1) 使用计算监控属性
- KnockoutJS 3.X API 第五章 高级应用(5) 使用预处理扩展Knockout绑定语法
- jQuery 1.7 正式版已经可以下载使用。jQuery是一个JavaScript库,它简化了HTML文档遍历,事件处理,动画和为网络快速发展的Ajax交互。jQuery 1.7 版本加入了新的事件API .on() 和 .off(),提
- 使用sendmessage函数模拟点击其他程序按钮事件
- VS中使用VC资源编辑器添加变量或事件处理程序出现脚本错误的解决办法
- MOSS 2007 应用随笔(17)-- 使用SPEventHandler事件处理程序(一)启用事件处理机制
- MOSS 2007 应用随笔(18)-- 使用SPEventHandler事件处理程序(二)编写事件程序
- IE事件处理程序与其他浏览器之区别
- Java处理敲击键盘事件 Etch-A-Sketch玩具实现 光标画笔画图程序 Java核心技术