填坑之路:Knockout.js

1. applyBindings
ko.applyBindings(myViewModel, document.getElementById('someElementId'))

- 参数1:绑定view model
- 参数2:作用的容器范围
2. observable

ko.observable监控的对象都是方法(函数)。导致:如果数据添加后成了:function c(...), 表示添加数据时类型错了,切记要引用函数形式,即xx.xx();

3. 绑定
  • Visible 绑定:通过绑定一个值来确定DOM元素显示或隐藏;
  • Text 绑定:主要是让DOM元素显示参数值。(不担心html和脚本注入风险,绑定设置元素的text 值innerText和textContent);
  • html 绑定:绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数。(解析html标签,注意内容,可能会被注入,绑定设置元素的innerHtml上);
  • css 绑定:添加或删除一个或多个CSS class到DOM元素上;
  • style 绑定:添加或删除一个或多个DOM元素上的style值;
  • attr 绑定:提供了一种方式可以设置DOM元素的任何属性值;
  • foreach 绑定:循环遍历输出某个数组、集合中的内容(常用于render 列表等,上下文属性$index(索引),$parent(指向foreach的对象),$data(foreach对象的遍历的每个子对象数据),可以使用as 为foreach中的元素定义别名)
<script type="text/javascript" src="knockout-3.4.2.min.js"></script>
 
 <ul data-bind="foreach: { data: categories, as: 'category' }"> 
     <li> 
         <ul data-bind="foreach: { data: items, as: 'item' }"> 
             <li> 
                 <span data-bind="text: category.name"></span>: 
                 <span data-bind="text: item"></span> 
             </li> 
         </ul> 
     </li> 
 </ul>  

 <script>
     var viewModel = {
         categories: ko.observableArray([
             { name: 'Fruit', items: ['Apple', 'Orange', 'Banana'] },
             { name: 'Vegetables', items: ['Celery', 'Corn', 'Spinach'] }
         ])
     };
     ko.applyBindings(viewModel); 
 </script>
  • if绑定:控制某个组件动态显示,类似于visible,不过if直接控制dom节点,而visible只是修改domdisplay;
  • with绑定:重新定义上下文绑定(可以实现tab选项卡转换、以及模拟页面跳转);
  • click绑定:在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数(阻止冒泡:clickBubble: false);
  • event绑定:在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数(大部分情况下是用在keypress,mouseover和mouseout上,阻止冒泡:youreventBubble: false);
  • submit绑定:在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数(只能用在表单form元素上);
  • value绑定:关联DOM元素的值到view model的属性上(主要是用在表单控件<input>,<select>和<textarea>上,默认用户离开焦点后更新,若定义了valueUpdate,则将根据其指定的事件更新valueUpdate: 'afterkeydown');
  • checked绑定:获取checked的状态true false(仅用在checkbox或者radio button)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 115,343评论 24 450
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,160评论 19 139
  • 写作对我来说一直都是荒野中野蛮生长。没有任何章法可讲,不像李叫兽那样刻意练习,不像小马宋那样洞察人性。作为一个文字...
    姗姗莱兹阅读 1,526评论 2 1
  • (一)午睡 午后,Ta爬在沙发上睡觉。 没有闹钟的声音。鼾声响起,是头一次。 这不是他的习性,...
    李放fun阅读 4,160评论 0 6

友情链接更多精彩内容