Html5 經驗

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