建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹了Knockout中Observables有什么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
1 創(chuàng)建帶有監(jiān)控屬性的view model
Observables
Knockout是在下面三個(gè)核心功能是建立起來的：
◆ 監(jiān)控屬性(Observables)和依賴跟蹤(Dependency tracking)
◆ 聲明式綁定(Declarative bindings)
◆ 模板(Templating)
這一節(jié)，你講學(xué)到3個(gè)功能中的***個(gè)。 在這之前， 我們來解釋一下MVVM模式和view model的概念。
MVVM and View Models
Model-View-View Model (MVVM) 是一種創(chuàng)建用戶界面的設(shè)計(jì)模式。 描述的是如何將復(fù)雜的UI用戶界面分成3個(gè)部分：
◆ model: 你程序里存儲(chǔ)的數(shù)據(jù)。這個(gè)數(shù)據(jù)包括對(duì)象和業(yè)務(wù)操作(例如：銀子賬戶可以完成轉(zhuǎn)賬功能)， 并且獨(dú)立于任何UI。使用KO的時(shí)候，通常說是向服務(wù)器調(diào)用Ajax讀寫這個(gè)存儲(chǔ)的模型數(shù)據(jù)。
◆ view model: 在UI上，純code描述的數(shù)據(jù)以及操作。例如，如果你實(shí)現(xiàn)列表編輯，你的view model應(yīng)該是一個(gè)包含列表項(xiàng)items的對(duì)象和暴露的add/remove列表項(xiàng)(item)的操作方法。
注意這不是UI本身：它不包含任何按鈕的概念或者顯示風(fēng)格。它也不是持續(xù)數(shù)據(jù)模型 – 包含用戶正在使用的未保存數(shù)據(jù)。使用KO的時(shí)候，你的view models是不包含任何HTML知識(shí)的純JavaScript 對(duì)象。保持view model抽象可以保持簡(jiǎn)單，以便你能管理更復(fù)雜的行為。
◆ view: 一個(gè)可見的，交互式的，表示view model狀態(tài)的UI。 從view model顯示數(shù)據(jù)，發(fā)送命令到view model(例如：當(dāng)用戶click按鈕的時(shí)候) ，任何view model狀態(tài)改變的時(shí)候更新。
使用KO的時(shí)候，你的view就是你帶有綁定信息的HTML文檔，這些聲明式的綁定管理到你的view model上?；蛘吣憧梢允褂媚０鍙哪愕膙iew model獲取數(shù)據(jù)生成HTML。
創(chuàng)建一個(gè)view model，只需要聲明任意的JavaScript object。例如：
var myViewModel = { personName: 'Bob', personAge: 123 };你可以為view model創(chuàng)建一個(gè)聲明式綁定的簡(jiǎn)單view。例如：下面的代碼顯示personName 值：
The name is
Activating Knockout
data-bind屬性盡快好用但它不是HTML的原生屬性(它嚴(yán)格遵從HTML5語(yǔ)法， 雖然HTML4驗(yàn)證器提示有不可識(shí)別的屬性但依然可用)。由于瀏覽器不識(shí)別它是什么意思，所以你需要激活Knockout 來讓他起作用。
激活Knockout，需要添加如下的