前言
最近一段時間抽空學習了一下Knockout.js,發現這個框架十分有趣:
- 它提供了一種優雅的解決方案來實現UI元素與Javascript對象之間的綁定
- 能夠實現雙向綁定:UI元素變化的時候更新js對象,反之亦然
- 能夠跟蹤依賴(dependency tracking),就是對象之間存在依賴的情況下,依賴項的變化會傳導到整個依賴鏈條的末端。
- 靈活的模板功能
可以這么理解,基本上這是一個在web瀏覽器中實現類似Silverlight,WPF那種“數據綁定”功能的框架,不過它的功能遠不止綁定這么簡單。
通過學習官方文檔,自己也整理了基本ko的所有功能,現在借博客園把整理的東西分享出來,讓不喜歡看e文文檔的童鞋們可以多一個了解ko的資源吧。
另外每個章節我都會把對應的Demo貼在文章中,給大家一個直觀的感受。
備注:列表中使用*2.1 NEW*號標注了哪些特性是2.1版本新加入的功能
計划章節(隨時更新)
- 1、初識KO:監控屬性(Observable) 與 依賴屬性(Computed)
- 2、列表操作:監控數組(Observable Array)。
- 3、文本和樣式綁定(上篇):visible綁定、js表達式充當綁定值
- 4、文本和樣式綁定(中篇):text綁定、html綁定
- 5、文本和樣式綁定(下篇):css綁定、style綁定、attr綁定
- 6、控制流Control Flow(上篇):foreach綁定、虛擬結點綁定
- 7、控制流Control Flow(中篇):理解綁定上下文Binding Context
- 8、控制流Control Flow(下篇):if綁定與with綁定
- 9、內建綁定之——Click綁定
- 10、內建綁定之——Event綁定
- 11、內建綁定之——Enable綁定、Value綁定、uniqueName綁定
- 12、內建綁定之——hasFocus綁定
- 13、內建綁定之——checked綁定
- 14、內建綁定之——option與selectOption綁定
- 15、自定義模板:模板綁定
- 16、創建自己的綁定(上篇):自定義Binding
- 17、*2.1 NEW*創建自己的綁定(中篇):綁定上下文擴展——修改子元素綁定上下文
- 18、*2.1 NEW*創建自己的綁定(下篇):自定Binding也可以支持虛擬DOM元素
- 19、ko數據輔助:viewModel的Json序列化支持
- 20、進階技巧:擴展Observable
- 21、進階技巧:使用throttle extender延遲更新computed屬性
- 22、進階技巧:使用dataFor,contextFor配合常規事件綁定
- 23、進階技巧:使用fn擴展自定義函數
- 24、*2.1 NEW*使用$Index關鍵字綁定自動序號
- 25、*2.1 NEW*判斷屬性是否computed
- 26、*2.1 NEW*控制json序列化范圍
相關資源:
Knockout官方首頁:http://knockoutjs.com/