無論是 Model,View 還是 Collection,當被實例化時,initialize() 方法都會被自動觸發。
el 屬性
el 屬性指的是已經在瀏覽器中創建好的 DOM 對象,每個 View 都有一個 el 屬性,如果它未被定義,Backbone 將會自己創建一個空的 div 元素作為 el 屬性。
下面讓我們來為 View 創建一個 el 屬性,并設為 #search_containe。
事件名稱可以是DOM對象支持的任何事件,選擇器可以是jQuery或Zepto支持的任意選擇器字符串(包括標簽選擇器、類選擇器、id選擇器等),而事件處理函數應該是已經定義在視圖類本身的方法名稱。
視圖對象會自動解析events列表中的描述,即使用jQuery或Zepto獲取選擇器描述的DOM對象,并將事件處理函數綁定到事件名稱中。這些操作都會在視圖類被實例化時自動完成,我們可以更關心視圖類本身的結構,而不是刻意地去考慮如何綁定事件。你可能在擔心另外一個問題:如果視圖的DOM結構是動態生成的,Backbone是否提供了相應的方法用于動態綁定和解除事件?
其實你并不需要關心這個問題,因為events中的事件是通過delegate()方法綁定到視圖對象的el元素上,而并非是選擇器所描述的元素。因此視圖內的結構無論如何變化,events中的事件都是有效的。
(如果你對jQuery比較熟悉,可能了解它所提供的delegate()方法。該方法實際上將事件綁定在父層元素,然后在事件冒泡過程中,通過檢查目標子元素來觸發事件。)
視圖對象通過delegate()方法綁定事件,意味著我們不需要關心視圖結構變化對事件產生的影響,同時也說明events中選擇器所對應的元素必須處于視圖的el元素之內,否則綁定的事件是無法生效的。盡管如此,有些情況下可能我們仍然需要手動綁定和解除事件,視圖對象提供了delegateEvents()和undelegateEvents()方法用于動態綁定和解除events事件列表,你可以通過查看API文檔來了解它們。
渲染視圖和數據
視圖主要用于界面事件的綁定和數據渲染,然而視圖對象僅僅提供了一個和渲染相關的方法render(),并且它是一個沒有任何邏輯、也沒有任何地方引用到的空方法,我們需要重載它來實現自己的渲染邏輯。
視圖中可能包含許多界面邏輯,這里建議所有的視圖子類都重載render()方法,并將它作為最終渲染的入口方法。在團隊開發中,嚴格按照規范編碼可以幫助別人更好地理解和維護你的代碼。聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
實例講解JavaScript的Backbone.js框架中的View視圖_基礎知識
實例講解JavaScript的Backbone.js框架中的View視圖_基礎知識:Backbone 中的 View 用來反映你 app 中 Model 的模樣。它們會監聽事件并作出相應的反應。 接下來的教程我不會告訴你如何把 Model 和 Collection 綁定到 View 上,而是主要討論 View 是如何使用 javascript 模板庫的,尤其是 Underscore推薦度:
- 熱門焦點