Knockout介紹

Knockout簡(jiǎn)稱ko，是一個(gè)輕量級(jí)的javascript類庫，采用MVVM設(shè)計(jì)模式（即Model、view、viewModel），簡(jiǎn)單優(yōu)雅的實(shí)現(xiàn)了雙向綁定，實(shí)時(shí)更新，幫助您使用干凈的數(shù)據(jù)模型來創(chuàng)建豐富的、響應(yīng)式的用戶界面。

Knockout有三大核心特性：

    1.優(yōu)雅的依賴跟蹤（Elegant dependency tracking）：任何時(shí)候數(shù)據(jù)模型的變化都會(huì)自動(dòng)更新相應(yīng)的UI部分；

    2.聲明式綁定（Declarative bindings） ： 簡(jiǎn)單的將UI和你的數(shù)據(jù)模型關(guān)聯(lián)起來，你就可以創(chuàng)建復(fù)雜的動(dòng)態(tài)UI；

    3.高度可擴(kuò)展性（Trivially extensible） ： 只需幾行代碼實(shí)現(xiàn)一個(gè)自定義的行為來作為聲明式綁定；

其他優(yōu)點(diǎn)：

    1.純凈的javascript代碼；

    2.可以隨時(shí)添加到你現(xiàn)有的web應(yīng)用中；

    3.輕量級(jí)，GZIP后只有13K；

    4.能夠工作于幾乎所有主流瀏覽器（(IE 6+, Firefox 2+, Chrome, Safari, Edge, others）；

ko采用的是MVVM設(shè)計(jì)模式，即model view viewModel。

簡(jiǎn)單的例子

There are <span data-bind="text: myItems().length"></span> items 

就是這么簡(jiǎn)單，你不必寫代碼來更新text內(nèi)容，它會(huì)在數(shù)組長(zhǎng)度改變時(shí)自動(dòng)更新，與此類似，如果我們想利用數(shù)組長(zhǎng)度控制按鈕的可用性僅僅需要：

<button data-bind="enable: myItems().length < 5">Add</button>

下面接著給大家介紹使用Knockout綁定上下文

Binding context

binding context是一個(gè)保存數(shù)據(jù)的對(duì)象，你可以在你的綁定中引用它。當(dāng)應(yīng)用綁定的時(shí)候，knockout自動(dòng)創(chuàng)建和管理binding context的繼承關(guān)系。這種層次結(jié)構(gòu)的根引用你指定的viewModel參數(shù)（ko.applyBindings(viewModel)）。

然后每次使用一個(gè)控制流如with或者foreach 來創(chuàng)建一個(gè)子節(jié)點(diǎn)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

這是一個(gè)數(shù)組，代表了所有的父節(jié)點(diǎn)view models

$parent[0] : 代表父節(jié)點(diǎn)；

$parent[1] : 代表祖父節(jié)點(diǎn)；

$parent[1] : 代表曾祖父節(jié)點(diǎn)；

.....以此類推

$root

它是root context的根節(jié)點(diǎn)視圖模型對(duì)象，一般是通過ko.applyBindings指定的，相當(dāng)于$parents[$parents.length - 1]。

$component

如果你在一個(gè)特定的組件模板的上下文中，$component指定的是那個(gè)component，它的指定組件相當(dāng)于$root，在嵌套的組件情況下，它代表了最鄰近的一個(gè)組件。

$data

它代表了當(dāng)前上下文中的viewModel對(duì)象，$data和$root是相當(dāng)?shù)?。在嵌套的binding context中，這個(gè)參數(shù)將設(shè)置到當(dāng)前的數(shù)據(jù)項(xiàng)。

$data是非常有用的，例如，當(dāng)你想引用viewModel本身而不是viewModel的屬性的時(shí)候。

<ul data-bind="foreach: ['cats', 'dogs', 'fish']">
 <li>The value is <span data-bind="text: $data"></span></li>
</ul> 
$index(僅在foreach binding中可用)

它是一個(gè)在foreach綁定中的數(shù)組的從0開始的索引條目。不想其他的context屬性，$index是observable的，即會(huì)隨著數(shù)組item的更新而更新。

$parentContext

指定了父節(jié)點(diǎn)級(jí)別的binding context對(duì)象，與$parent不同的是，它是在父節(jié)點(diǎn)中指定數(shù)據(jù)而不是binding context。

$rowData

它是在當(dāng)前上下文中，原viewModel的值，通常它相當(dāng)于$data，但是，如果viewModel被ko以observable來修飾，$data是unobservable的，而$rowData是observable的。

最新評(píng)論