填坑之路：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）