一般的數(shù)據(jù)綁定有三種:One-Time，One-Way，Two-way。

One-Time綁定模式的意思即為從viewModel綁定至UI這一層只進行一次綁定，程序不會繼續(xù)追蹤數(shù)據(jù)的在兩者中任何一方的變化，這種綁定方式很使用于報表數(shù)據(jù)，數(shù)據(jù)僅僅會加載一次。

One-Way綁定模式即為單向綁定，即object-UI的綁定，只有當viewModel中數(shù)據(jù)發(fā)生了變化，UI中的數(shù)據(jù)也將會隨之發(fā)生變化，反之不然。

Two-Way綁定模式為雙向綁定，無論數(shù)據(jù)在Object或者是UI中發(fā)生變化，應(yīng)用程序?qū)铝硪环?#xff0c;這是最為靈活的綁定方式，同時代價也是最大的。數(shù)據(jù)綁定只是作為元素的自定義屬性寫上標簽內(nèi)，并不能決定它是何種綁定。

如果值是通過ko.observable定義的說明是雙向綁定，否則為One-Time綁定，在knockout不存在單向綁定。

applyBindings

隱藏代碼// Knockout調(diào)用applyBindings激活myViewModel（即把myViewModel和View中的聲明式綁定data-bind接洽關(guān)系起來） ko.applyBindings（myViewModel）; // 限制只在指定對象someElementId和后代節(jié)點中進行激活操縱。 ko.applyBindings（myViewModel， document.getElementById（""someElementId""））; personName: ko.observable（""Bob""）， // 靜態(tài)綁定 The name is <span data-bind="text: personName"></span>

Observables

并不是所有的瀏覽器都支撐JavaScript的getters和setters辦法（IE），是以從兼容性推敲，ko.observable是function。

讀取observable屬性：myViewModel.personName（）

設(shè)置observable屬性：myViewModel.personName（""Mary""）

同時設(shè)置多個observable屬性：myViewModel.personName（""Mary""）.personAge（50） 鏈式語法

隱藏代碼// 動態(tài)綁定（主動訂閱，作廢訂閱） var subscription = myViewModel.personName.subscribe（function（newValue） { /* do stuff */ }）; // ...then later... subscription.dispose（）; // I no longer want notifications// Computed Observablesthis.fullName = ko.computed（function（） {return this.firstName（） + " " + this.lastName（）;}， this）;var myObservableArray = ko.observableArray（）; // Initially an empty array myObservableArray.push（""Some value""）; // Adds the value and notifies observers// 初始化綁定命組 // This observable array initially contains three objects var anotherObservableArray = ko.observableArray（[{ name: "Bungle"， type: "Bear" }，{ name: "George"， type: "Hippo" }，{ name: "Zippy"， type: "Unknown" } ]）;// 自定義排序 myObservableArray.sort（function（left， right） { return left.lastName == right.lastName ？ 0 : （left.lastName < right.lastName ？ -1 : 1） }）// 可寫的依附屬性 --- 數(shù)字主動格局化顯示，保存值時移除無關(guān)逗號 function MyViewModel（） {this.price = ko.observable（25.99）;this.formattedPrice = ko.computed（{read: function （） {return ""￥"" + this.price（）.toFixed（2）;}，write: function （value） {// Strip out unwanted characters， parse as float， then write the raw data back to the underlying "price" observablevalue = parseFloat（value.replace（/[^.d]/g， ""））;this.price（isNaN（value） ？ 0 : value）; // Write to underlying storage}，owner: this}）; }ko.applyBindings（new MyViewModel（））;

Writeable computed observables可寫的依附屬性（FirstName 和 FullName彼此換算，數(shù)字主動格局化顯示）

ko.dependentObservable（Knockout 2.0中新增長的辦法，和ko.computed等價，然則加倍便利懂得應(yīng)用）

Observable Arrays

observableArray ：跟蹤的是數(shù)組中的對象，而不是對象的狀況。即observableArray 僅跟蹤它擁有的對象，

并且在對象被添加或者刪除的時辰，通知listeners

。要監(jiān)控對象的屬性變更，須要編寫自力的代碼。 因為observableArray（）辦法放回的是一個數(shù)組，是以從技巧上來說，任何Javascript關(guān)于數(shù)組操縱的原生辦法都能直接應(yīng)用。

然則基于下述來由，凡是推薦應(yīng)用KO中的等價辦法：

1，KO中的辦法支撐所有主流瀏覽器（比如，Javascript原生辦法indexOf在<=IE8時不正常，而KO的indexOf 能正常工作）

2，dependency tracking

3，語法加倍簡潔：調(diào)用KO中的辦法應(yīng)用myObservableArray.push（...），調(diào)用原生Javascript中的辦法應(yīng)用myObservableArray（）.push（...）

具體每個辦法參考下面鏈接中的文檔

observableArray 排序：默認對字符串用字母排序，對數(shù)字用數(shù)值排序。可以自定義排序辦法：參考代碼塊中的代碼

總結(jié)

以上是生活随笔為你收集整理的applyBinding Observables的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。