首頁 > web前端 > js教程 > 認識Knockout及如何使用Knockout綁定上下文_javascript技巧

認識Knockout及如何使用Knockout綁定上下文_javascript技巧

WBOY
發布: 2016-05-16 15:23:22
原創
1480 人瀏覽過

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的。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板