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）
网友评论