天天看點

《Ember.js實戰》——2.4 觀察者模式

本節書摘來自異步社群《ember.js實戰》一書中的第2章,第2.4節,作者:【挪】joachim haagen skeie(喬基姆•哈根•斯基)著,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

從概念上講,單向綁定包含一個觀察者與一個setter,雙向綁定包含兩個觀察者與兩個setter。觀察者在不同語言和架構中有不同的稱謂和實作。在ember.js裡,一個觀察者就是一個javascript函數,無論其觀察的變量何時更新,都會觸發該函數的調用。在綁定較難實作或希望在某個值發生改變時執行某個任務的場景中,比較适合使用觀察者模式。

要實作一個觀察者,請使用.addobserver()方法,或者使用内聯的observes()方法字尾。代碼清單2-6展示了觀察者的一種使用方式。基于控制器的content數組的項數,啟動并停止計時器。

代碼清單2-6 觀察控制器内容長度并控制計時器

《Ember.js實戰》——2.4 觀察者模式

觀察者contentobserver是一個普通的javascript方法,其首先擷取控制器的content數組。如果存在content數組項且計時器未啟動,則建立一個新的計時器,時間間隔設為15 000 ms。計時器裡将周遊每個數組項,并通過自定義的reload()方法來重新加載數組項資料。如果content數組為空,則停止已有計時器。

要讓contentobserver函數成為一個觀察者,我們添加了内聯的observes()方法,并添加被觀察屬性。

可以使用替代的addobserver()方法來重構上面的觀察者。函數的主體代碼部分都是一樣的,但聲明稍有不同,如代碼清單2-7所示。

代碼清單2-7 通過.addobserver方法建立觀察者

《Ember.js實戰》——2.4 觀察者模式

雖然這是一種建立觀察者的可能方式,但我發現如代碼清單2-6的内聯方式更清晰并更具可讀性。我也習慣為觀察者函數添加observer字尾,當然這不是必須的。

有時你可能想觀察數組項的屬性,在記事本應用裡,notes.notescontroller有一個ember對象組成的content數組,該對象有兩個屬性:name和value。為了觀察每個對象的name屬性,可以使用@each來周遊被觀察屬性,如代碼清單2-8所示。

代碼清單2-8 通過@each觀察數組項的改變

《Ember.js實戰》——2.4 觀察者模式

有了ember.js對象模型,本章的所有功能才可能得以實作,接下來具體了解ember.js對象模型。

繼續閱讀