knockoutjs六 with 绑定
2016-02-09 21:24
549 查看
knockoutjs六 with 绑定
今天要讲的是with绑定,with绑定和if有点相似,用官方文档的说法他的作用是创建了一个上下文,<h1 data-bind="text: city"> </h1> <p data-bind="with: coords"> Latitude: <span data-bind="text: latitude"> </span>, Longitude: <span data-bind="text: longitude"> </span> </p> <script> function Model() { var self = this; city=ko.observable( "London"); coords=ko.observable( { latitude: 51.5001524, longitude: -0.1262362 }); } var model = new Model(); ko.applyBindings(model); </script>
因为用了with,所以with下面的子元素的节点就不需要使用coords.latitude和coords.longitude了,因为他们这时候的上下文已经切换到了coords下了。
当然with还有个作用,当with的条件是null或者是undefined,那么下面的子元素就不会加载,如果不空就加载,这样就避免了一些错误,不会当coords是null或者是undefined的时候还调用coords.latitude发生报错。
也可以使用虚节点调用with:
<ul> <li>Header element</li> <!-- ko with: outboundFlight --> ... <!-- /ko --> <!-- ko with: inboundFlight --> ... <!-- /ko --> </ul>
这次的比较简单,就介绍这么多。代码托管在https://github.com/lushunming/knockoutJSDemo.git可以直接克隆。希望大家有意见可以留言,有疑问或者错误可以加我的qq1357197829和我交流
相关文章推荐
- JSP脚本和注释
- javascript笔记3-面向对象的程序设计-创建对象
- [Cycle.js] Fine-grained control over the DOM Source
- js 强制转换
- [Cycle.js] Making our toy DOM Driver more flexible
- js 隐式转换
- #学习笔记#(37)自制2016年日期选择器-JS
- #学习笔记#(36)JS初步实现todolist添加任务功能
- JavaScript DOM编程基础精华03(动态设置,层的操作,性能问题)
- JavaScript DOM编程基础精华03(动态设置,层的操作,性能问题)
- JavaScript DOM编程基础精华02(window对象的属性,事件中的this,动态创建DOM,innerText和innerHTML)
- JavaScript DOM编程基础精华02(window对象的属性,事件中的this,动态创建DOM,innerText和innerHTML)
- JSP学习小结
- JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)
- JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)
- js 支持的原始数据类型
- JS产生随机数的几个用法!
- js 的基础知识变量
- 设置jsp默认打开方式
- JavaScript引用类型和值类型