最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guā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)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

Backbone.js框架中Model與Collection的使用實(shí)例_基礎(chǔ)知識

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

Backbone.js框架中Model與Collection的使用實(shí)例_基礎(chǔ)知識

Backbone.js框架中Model與Collection的使用實(shí)例_基礎(chǔ)知識:Model 關(guān)于backbone,最基礎(chǔ)的一個(gè)東西就是model,這個(gè)東西就像是后端開發(fā)中的數(shù)據(jù)庫映射那個(gè)model一樣,也是數(shù)據(jù)對象的模型,并且應(yīng)該是和后端的model有相同的屬性(僅是需要通過前端來操作的屬性)。 下面就從實(shí)例來一步一步的帶大家來了解backbone
推薦度:
導(dǎo)讀Backbone.js框架中Model與Collection的使用實(shí)例_基礎(chǔ)知識:Model 關(guān)于backbone,最基礎(chǔ)的一個(gè)東西就是model,這個(gè)東西就像是后端開發(fā)中的數(shù)據(jù)庫映射那個(gè)model一樣,也是數(shù)據(jù)對象的模型,并且應(yīng)該是和后端的model有相同的屬性(僅是需要通過前端來操作的屬性)。 下面就從實(shí)例來一步一步的帶大家來了解backbone

Model
關(guān)于backbone,最基礎(chǔ)的一個(gè)東西就是model,這個(gè)東西就像是后端開發(fā)中的數(shù)據(jù)庫映射那個(gè)model一樣,也是數(shù)據(jù)對象的模型,并且應(yīng)該是和后端的model有相同的屬性(僅是需要通過前端來操作的屬性)。
下面就從實(shí)例來一步一步的帶大家來了解backbone的model到底是什么樣的一個(gè)東西。
首先定義一個(gè)html的頁面:



4、監(jiān)聽對象中屬性的變化

5、為對象添加驗(yàn)證規(guī)則,以及錯(cuò)誤提示

6、對象的獲取和保存,需要服務(wù)器端支持才能測試。
首先需要為對象定義一個(gè)url屬性,調(diào)用save方法時(shí)會post對象的所有屬性到server端。

注:上述代碼僅僅均為可正常執(zhí)行的代碼,不過關(guān)于服務(wù)器端的實(shí)例在后面會有。
這里還要補(bǔ)充一點(diǎn),就是關(guān)于服務(wù)器的異步操作都是通過Backbone.sync這個(gè)方法來完成的,調(diào)用這個(gè)方法的時(shí)候會自動的傳遞一個(gè)參數(shù)過去,根據(jù)參數(shù)向服務(wù)器端發(fā)送對應(yīng)的請求。比如你save,backbone會判斷你的這個(gè)對象是不是新的,如果是新創(chuàng)建的則參數(shù)為create,如果是已存在的對象只是進(jìn)行了改變,那么參數(shù)就為update,如果你調(diào)用fetch方法,那參數(shù)就是read,如果是destory,那么參數(shù)就是delete。也就是所謂的CRUD ("create", "read", "update", or "delete"),而這四種參數(shù)對應(yīng)的請求類型為POST,GET,PUT,DELETE。你可以在服務(wù)器根據(jù)這個(gè)request類型,來做出相應(yīng)的CRUD操作。

Note:
關(guān)于url和urlRoot的事,如果你設(shè)置了url,那么你的CRUD都會發(fā)送對應(yīng)請求到這個(gè)url上,但是這樣又一個(gè)問題,就是delete請求,發(fā)送了請求,但是卻沒有發(fā)送任何數(shù)據(jù),那么你在服務(wù)器端就不知道應(yīng)該刪除哪個(gè)對象(記錄),所以這里又一個(gè)urlRoot的概念,你設(shè)置了urlRoot之后,你發(fā)送PUT和DELETE請求的時(shí)候,其請求的url地址就是:/baseurl/[model.id],這樣你就可以在服務(wù)器端通過對url后面值的提取更新或者刪除對應(yīng)的對象(記錄)。

Collection
collection是model對象的一個(gè)有序的集合,概念理解起來十分簡單,在通過幾個(gè)例子來看一下,會覺得更簡單。
1、關(guān)于book和bookshelf的例子

很簡單,不解釋
2、使用fetch從服務(wù)器端獲取數(shù)據(jù)
首先要在上面的的Bookshelf中定義url,注意collection中并沒有urlRoot這個(gè)屬性?;蛘吣阒苯釉趂etch方法中定義url的值,如下:

其中也定義了兩個(gè)接受返回值的方法,具體含義我想很容易理解,返回正確格式的數(shù)據(jù),就會調(diào)用success方法,錯(cuò)誤格式的數(shù)據(jù)就會調(diào)用error方法,當(dāng)然error方法也看添加和success方法一樣的形參。
對應(yīng)的BookShelf的返回格式如下:[{'title':'book1'},{'title':'book2'}.....]
3、reset方法
這個(gè)方法的時(shí)候是要和上面的fetch進(jìn)行配合的,collection在fetch到數(shù)據(jù)之后,會調(diào)用reset方法,所以你需要在collection中定義reset方法或者是綁定reset方法。這里使用綁定演示:

綁定的步驟要在fetch之前進(jìn)行。
下面給出關(guān)于collection的完整代碼,需要服務(wù)器端支持才行,服務(wù)器端的搭建在后面會寫到。

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

文檔

Backbone.js框架中Model與Collection的使用實(shí)例_基礎(chǔ)知識

Backbone.js框架中Model與Collection的使用實(shí)例_基礎(chǔ)知識:Model 關(guān)于backbone,最基礎(chǔ)的一個(gè)東西就是model,這個(gè)東西就像是后端開發(fā)中的數(shù)據(jù)庫映射那個(gè)model一樣,也是數(shù)據(jù)對象的模型,并且應(yīng)該是和后端的model有相同的屬性(僅是需要通過前端來操作的屬性)。 下面就從實(shí)例來一步一步的帶大家來了解backbone
推薦度:
標(biāo)簽: model Collection backbone
  • 熱門焦點(diǎn)

最新推薦

猜你喜歡

熱門推薦

專題
Top