最新文章專(zhuān)題視頻專(zhuān)題問(wèn)答1問(wèn)答10問(wèn)答100問(wèn)答1000問(wèn)答2000關(guān)鍵字專(zhuān)題1關(guān)鍵字專(zhuān)題50關(guān)鍵字專(zhuān)題500關(guān)鍵字專(zhuān)題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專(zhuān)題關(guān)鍵字專(zhuān)題tag2tag3文章專(zhuān)題文章專(zhuān)題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專(zhuān)題3
問(wèn)答文章1 問(wèn)答文章501 問(wèn)答文章1001 問(wèn)答文章1501 問(wèn)答文章2001 問(wèn)答文章2501 問(wèn)答文章3001 問(wèn)答文章3501 問(wèn)答文章4001 問(wèn)答文章4501 問(wèn)答文章5001 問(wèn)答文章5501 問(wèn)答文章6001 問(wèn)答文章6501 問(wèn)答文章7001 問(wèn)答文章7501 問(wèn)答文章8001 問(wèn)答文章8501 問(wèn)答文章9001 問(wèn)答文章9501
當(dāng)前位置: 首頁(yè) - 科技 - 知識(shí)百科 - 正文

實(shí)例講解JavaScript的Backbone.js框架中的View視圖_基礎(chǔ)知識(shí)

來(lái)源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 21:50:02
文檔

實(shí)例講解JavaScript的Backbone.js框架中的View視圖_基礎(chǔ)知識(shí)

實(shí)例講解JavaScript的Backbone.js框架中的View視圖_基礎(chǔ)知識(shí):Backbone 中的 View 用來(lái)反映你 app 中 Model 的模樣。它們會(huì)監(jiān)聽(tīng)事件并作出相應(yīng)的反應(yīng)。 接下來(lái)的教程我不會(huì)告訴你如何把 Model 和 Collection 綁定到 View 上,而是主要討論 View 是如何使用 javascript 模板庫(kù)的,尤其是 Underscore
推薦度:
導(dǎo)讀實(shí)例講解JavaScript的Backbone.js框架中的View視圖_基礎(chǔ)知識(shí):Backbone 中的 View 用來(lái)反映你 app 中 Model 的模樣。它們會(huì)監(jiān)聽(tīng)事件并作出相應(yīng)的反應(yīng)。 接下來(lái)的教程我不會(huì)告訴你如何把 Model 和 Collection 綁定到 View 上,而是主要討論 View 是如何使用 javascript 模板庫(kù)的,尤其是 Underscore

Backbone 中的 View 用來(lái)反映你 app 中 Model 的模樣。它們會(huì)監(jiān)聽(tīng)事件并作出相應(yīng)的反應(yīng)。
接下來(lái)的教程我不會(huì)告訴你如何把 Model 和 Collection 綁定到 View 上,而是主要討論 View 是如何使用 javascript 模板庫(kù)的,尤其是 Underscore.js's _.template。
這里我們使用 jQuery 來(lái)操作 DOM 元素,當(dāng)然你也可以使用其他的庫(kù),例如 MooTools 或者 Sizzle,但是 Backbone 的官方文檔推薦我們使用 jQuery。
接下來(lái),我們以搜索框?yàn)槔齺?lái)新建一個(gè) View:

無(wú)論是 Model,View 還是 Collection,當(dāng)被實(shí)例化時(shí),initialize() 方法都會(huì)被自動(dòng)觸發(fā)。

el 屬性
el 屬性指的是已經(jīng)在瀏覽器中創(chuàng)建好的 DOM 對(duì)象,每個(gè) View 都有一個(gè) el 屬性,如果它未被定義,Backbone 將會(huì)自己創(chuàng)建一個(gè)空的 div 元素作為 el 屬性。
下面讓我們來(lái)為 View 創(chuàng)建一個(gè) el 屬性,并設(shè)為 #search_containe。



事件名稱(chēng)可以是DOM對(duì)象支持的任何事件,選擇器可以是jQuery或Zepto支持的任意選擇器字符串(包括標(biāo)簽選擇器、類(lèi)選擇器、id選擇器等),而事件處理函數(shù)應(yīng)該是已經(jīng)定義在視圖類(lèi)本身的方法名稱(chēng)。
視圖對(duì)象會(huì)自動(dòng)解析events列表中的描述,即使用jQuery或Zepto獲取選擇器描述的DOM對(duì)象,并將事件處理函數(shù)綁定到事件名稱(chēng)中。這些操作都會(huì)在視圖類(lèi)被實(shí)例化時(shí)自動(dòng)完成,我們可以更關(guān)心視圖類(lèi)本身的結(jié)構(gòu),而不是刻意地去考慮如何綁定事件。

你可能在擔(dān)心另外一個(gè)問(wèn)題:如果視圖的DOM結(jié)構(gòu)是動(dòng)態(tài)生成的,Backbone是否提供了相應(yīng)的方法用于動(dòng)態(tài)綁定和解除事件?
其實(shí)你并不需要關(guān)心這個(gè)問(wèn)題,因?yàn)閑vents中的事件是通過(guò)delegate()方法綁定到視圖對(duì)象的el元素上,而并非是選擇器所描述的元素。因此視圖內(nèi)的結(jié)構(gòu)無(wú)論如何變化,events中的事件都是有效的。
(如果你對(duì)jQuery比較熟悉,可能了解它所提供的delegate()方法。該方法實(shí)際上將事件綁定在父層元素,然后在事件冒泡過(guò)程中,通過(guò)檢查目標(biāo)子元素來(lái)觸發(fā)事件。)
視圖對(duì)象通過(guò)delegate()方法綁定事件,意味著我們不需要關(guān)心視圖結(jié)構(gòu)變化對(duì)事件產(chǎn)生的影響,同時(shí)也說(shuō)明events中選擇器所對(duì)應(yīng)的元素必須處于視圖的el元素之內(nèi),否則綁定的事件是無(wú)法生效的。

盡管如此,有些情況下可能我們?nèi)匀恍枰謩?dòng)綁定和解除事件,視圖對(duì)象提供了delegateEvents()和undelegateEvents()方法用于動(dòng)態(tài)綁定和解除events事件列表,你可以通過(guò)查看API文檔來(lái)了解它們。
渲染視圖和數(shù)據(jù)
視圖主要用于界面事件的綁定和數(shù)據(jù)渲染,然而視圖對(duì)象僅僅提供了一個(gè)和渲染相關(guān)的方法render(),并且它是一個(gè)沒(méi)有任何邏輯、也沒(méi)有任何地方引用到的空方法,我們需要重載它來(lái)實(shí)現(xiàn)自己的渲染邏輯。
視圖中可能包含許多界面邏輯,這里建議所有的視圖子類(lèi)都重載render()方法,并將它作為最終渲染的入口方法。在團(tuán)隊(duì)開(kāi)發(fā)中,嚴(yán)格按照規(guī)范編碼可以幫助別人更好地理解和維護(hù)你的代碼。  

聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

實(shí)例講解JavaScript的Backbone.js框架中的View視圖_基礎(chǔ)知識(shí)

實(shí)例講解JavaScript的Backbone.js框架中的View視圖_基礎(chǔ)知識(shí):Backbone 中的 View 用來(lái)反映你 app 中 Model 的模樣。它們會(huì)監(jiān)聽(tīng)事件并作出相應(yīng)的反應(yīng)。 接下來(lái)的教程我不會(huì)告訴你如何把 Model 和 Collection 綁定到 View 上,而是主要討論 View 是如何使用 javascript 模板庫(kù)的,尤其是 Underscore
推薦度:
標(biāo)簽: js javascript的 backbone
  • 熱門(mén)焦點(diǎn)

最新推薦

猜你喜歡

熱門(mén)推薦

專(zhuān)題
Top