knockoutjs 经验总结

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到页面