Knockout介紹
Knockout簡稱ko，是一個輕量級的javascript類庫，采用MVVM設計模式（即Model、view、viewModel），簡單優雅的實現了雙向綁定，實時更新，幫助您使用干淨的數據模型來創建豐富的、響應式的用戶界面。
Knockout有三大核心特性：
1.優雅的依賴跟蹤（Elegant dependency tracking）：任何時候數據模型的變化都會自動更新相應的UI部分；
2.聲明式綁定（Declarative bindings） ： 簡單的將UI和你的數據模型關聯起來，你就可以創建復雜的動態UI；
3.高度可擴展性（Trivially extensible） ： 只需幾行代碼實現一個自定義的行為來作為聲明式綁定；
其他優點：
1.純淨的javascript代碼；
2.可以隨時添加到你現有的web應用中；
3.輕量級，GZIP後只有13K；
4.能夠工作於幾乎所有主流浏覽器（(IE 6+, Firefox 2+, Chrome, Safari, Edge, others）；
ko采用的是MVVM設計模式，即model view viewModel。
簡單的例子
There are <span data-bind="text: myItems().length"></span> items
就是這麼簡單，你不必寫代碼來更新text內容，它會在數組長度改變時自動更新，與此類似，如果我們想利用數組長度控制按鈕的可用性僅僅需要：
<button data-bind="enable: myItems().length < 5">Add</button>
下面接著給大家介紹使用Knockout綁定上下文
Binding context
binding context是一個保存數據的對象，你可以在你的綁定中引用它。當應用綁定的時候，knockout自動創建和管理binding context的繼承關系。這種層次結構的根引用你指定的viewModel參數（ko.applyBindings(viewModel)）。
然後每次使用一個控制流如with或者foreach 來創建一個子節點binding context引用嵌套的viewModel data。
$parent
<h1 data-bind="text: name"></h1> <div data-bind="with: manager"> <!-- Now we're inside a nested binding context --> <span data-bind="text: name"></span> is the manager of <span data-bind="text: $parent.name"></span> </div>
$parents
這是一個數組，代表了所有的父節點view models
$parent[0] : 代表父節點；
$parent[1] : 代表祖父節點；
$parent[1] : 代表曾祖父節點；
.....以此類推
$root
它是root context的根節點視圖模型對象，一般是通過ko.applyBindings指定的，相當於$parents[$parents.length - 1]。
$component
如果你在一個特定的組件模板的上下文中，$component指定的是那個component，它的指定組件相當於$root，在嵌套的組件情況下，它代表了最鄰近的一個組件。
$data
它代表了當前上下文中的viewModel對象，$data和$root是相當的。在嵌套的binding context中，這個參數將設置到當前的數據項。
$data是非常有用的，例如，當你想引用viewModel本身而不是viewModel的屬性的時候。
<ul data-bind="foreach: ['cats', 'dogs', 'fish']"> <li>The value is <span data-bind="text: $data"></span></li> </ul> $index(僅在foreach binding中可用)
它是一個在foreach綁定中的數組的從0開始的索引條目。不想其他的context屬性，$index是observable的，即會隨著數組item的更新而更新。
$parentContext
指定了父節點級別的binding context對象，與$parent不同的是，它是在父節點中指定數據而不是binding context。
$rowData
它是在當前上下文中，原viewModel的值，通常它相當於$data，但是，如果viewModel被ko以observable來修飾，$data是unobservable的，而$rowData是observable的。