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)