http://knockoutjs.com/documentation/introduction.html
| knockout的模式 | MVVM |
| 四大重要概念 | 声明式绑定UI界面自动刷新依赖跟踪模版 |
| 一些特点 | 纯javascript类库 可添加到web程序最上部 简洁 才25kb 兼容任何主流浏览器 采用行为驱动开发 |
| 快捷键的设置方法 | settings->keymap |
| jQuery 和 knockout的 长处 | 1. jQuery 擅长 元素操作 和 事件 2. knockout 擅长 数据模型与用户UI界面进行关联 |
| data-bind | 文本 text 按钮是否可点击 enable ; 但实际操作中发现得用这个 touch-events: none; pointer-events: none; |
| 激活knockout | ko.applyBindings( viewModel , view ) ;这个view可以省略， 当你在一个页面中声明了多个View Model来绑定不同的界面区域时，这样限制是很有好处的 |
| 监控机制 | var myViewModel = { personName: ko.observable(‘Bob‘), personAge: ko.observable(123) } ; |
| 计算属性 | fullName:ko.computed( function(){ return this.personName + ” ” + this.personLastName ) ,} this ) ; |
| 监控属性数组（observableArray）。 | myObservableArray.sort( function(left, right) { return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1) }) var myObservableArray = ko.observableArray(); 2 myObservableArray.push(‘Some value‘); 有这些方法可用：pop unshift shift reverse splice remove removeAll observableArray ：跟踪的是数组中的对象，而不是对象的状况。即observableArray 仅跟踪它拥有的对象，并且在对象被添加或者删除的时辰，通知listeners 。要监控对象的属性变更，须要编写自力的代码 |
| visible | <div data-bind=”visible: shouldShowMessage”> <div data-bind=”if: displayMessage”> |
| text html 的绑定 | html |
| 其它属性绑定 用 attr | 比如 <a data-bind=”attr: { href: url, title: details }”> |
| 在没有绑定属性的情况下使用foreach | <!– ko foreach: myItems –> <li>Item <span data-bind=”text: $data”></span></li> <!– /ko –> |
| with | 要学会用 其实就是声明母对象 |
| as | 声明子对象的名字 举例： <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> |
| class其实是分开控制的 | <div class=”tab-1 active” data-bind=”click:navigateTo(‘bean‘), css: {‘active‘:$root.beanIsSelected”}></div> |
| 如果渲染绑定view的子级要不要加$root | 其实不用 |
| 如果在html里给绑定的方法加参数了，有一种写法默认会执行一次，有一种写法不会 | click:navigateTo(‘star‘) 这种会默认执行一次 click: function() { navigateTo(‘star‘) } 这种不会默认就执行一次 |
| 判断class是否存在支持 ！吗 | 不支持css: {‘active‘: !beanIsSelected}” 前面的这种写法是无效的 要用这种写法:css: {‘active‘: !beanIsSelected() } |
| 如何绑定图片地址 | <img data-bind=”attr:{‘src‘:oneitem.imgUrl}” /> |
| 动态绑定高度的方法 | data-bind=”style:{‘height‘:$root.tabInnerHeight }” tabInnerHeight: ko.computed( function(){ return (window.innerHeight * 0.6) + “px” ;}, this ), |
| 绑定方法的写法: | navigateTo: this.navigateTo.bind( this ), |
| $root | 基本上用不上 $root |
| event binding | <div data-bind=”event: { mouseover: enableDetails, mouseout: disableDetails }”> |
| 其它绑定 | form 的 submitinput 的 value |
| input 的 value 和 enable | <input type=‘text‘ data-bind=”value: cellphoneNumber, enable: hasCellphone” /> |
| hasfocus | <input data-bind=”hasfocus: isSelected” /> |
| checked | <p>Send me spam: <input type=”checkbox” data-bind=”checked: wantsSpam”/></p> |
| options | <p>Destination country: <select data-bind=”options: availableCountries”></select></p> |
| selectedOptions | <select data-bind=”options: availableCountries, selectedOptions: chosenCountries” size=”5″ multiple=”true”></select> |
| 上下文绑定 | #parent $parents $root $data $index $parentContext $context $element |
| template绑定通过模板将数据render到页面 | |