【移動應用開發(fā)技術】Backbone.js Wine Cellar中CRUD的示例分析

【移動應用開發(fā)技術】Backbone.jsWineCellar中CRUD的示例分析

在下給大家分享一下Backbone.jsWineCellar中CRUD的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！您將學習創(chuàng)建、更新及刪除(CRUD)葡萄酒。HTTP方法URL操作GET/api/wines檢索所有葡萄酒GET/api/wines/10檢索id==10的葡萄酒POST/api/wines添加新葡萄酒PUT/api/wines/10更新id==10的葡萄酒DELETE/api/wines/10刪除id==10的葡萄酒這些服務的PHP版本（使用Slim框架）均將隨下載內(nèi)容一同提供。

本文還將提供一個類似的Java版本的API（使用JAX-RS）。搭配使用Backbone.js和非RESTful服務如果您的持久層無法通過RESTful服務進行提供，您可以替換Backbone.sync。在本文檔中：“Backbone.sync是一個函數(shù)，Backbone每次嘗試讀取模型或將其保存至服務器時都會調(diào)用該函數(shù)。默認情況下，它使用(jQuery/Zepto).ajax發(fā)出RESTfulJSON請求。您可以替換它，以便利用不同的持久性策略，比如WebSockets、XML傳輸或本地存儲?！蔽也粫诒窘坛讨杏懻摲荝ESTful服務的使用。有關更多信息，請參閱文檔

。添加創(chuàng)建、更新和刪除功能您可以

運行將在本教程中進行編碼的應用程序。此在線版本的創(chuàng)建、更新和刪除功能均已禁用。此在線版本的創(chuàng)建、更新和刪除功能均已禁用。圖2.backbone.js代碼代碼重點Wine（第2行至第14行）第二部分向該葡萄酒模型添加了兩個屬性，如下所示：(1)urlRoot

（第3行）：RESTful服務終端將檢索或保存模型數(shù)據(jù)。請注意，只有在檢索/保存獨立于集合的模型時才需要使用此屬性。如果該模型是集合的一部分，集合中定義的URL屬性足以供Backbone.js了解如何使用您的RESTfulAPI檢索、更新或刪除數(shù)據(jù)。(2)Defaults

（第4行）：為模型創(chuàng)建新實例時使用的默認值。此屬性是可選屬性。但是，此應用程序需要使用此屬性促使wine-details信息模板呈現(xiàn)“空”葡萄酒模型對象（該情況將在添加新葡萄酒時發(fā)生）。WineListView（第22行至第40行）當用戶添加新葡萄酒時，您希望它自動顯示在列表中。要做到這一點，請將視圖綁定至WineListView模型（葡萄酒集合）的添加事件。當事件觸發(fā)后，該應用程序會創(chuàng)建新的WineListItemView實例并將其添加到該列表中。WineListItemView（第42行至第62行）(1)當用戶改變葡萄酒時，您希望對應的WineListItemView自動重新呈現(xiàn)以反映這種變化。要做到這一點，請將視圖綁定至其模型的更改事件，然后在觸發(fā)事件時執(zhí)行Render函數(shù)。同樣，當用戶刪除葡萄酒時，您希望自動刪除列表項。(2)要做到這一點，請將視圖綁定至其模型的破壞事件，然后在觸發(fā)事件時執(zhí)行我們的自定義Close函數(shù)。重要注意事項：

為避免內(nèi)存泄露及事件多次觸發(fā)，重要的是先解除事件偵聽器綁定，然后再從DOM中刪除列表項。(3)請注意，無論發(fā)生哪種情況，您都不用承擔重新呈現(xiàn)整個列表的費用。您只能重新呈現(xiàn)或刪除受更改影響的列表項。WineView（第64行至第123行）本著封裝精神，Save和Delete按鈕的事件處理程序均在WineView內(nèi)部進行定義，這與將它們作為自由懸掛式代碼塊在“類”定義外部定義截然相反。使用Backbone.js事件語法，采用jQuery幕后委托機制。您始終可以根據(jù)用戶在表單中的輸入內(nèi)容采用以下不同方法來更新模型：(1)“實時”方法：使用更改處理程序在表單更改時更新模型。這種方法從本質(zhì)上而言是雙向數(shù)據(jù)綁定方法。模型和UI控件始終同步。您可以利用這種方法選擇將更改實時發(fā)送至服務器（隱式保存），還是等到用戶單擊Save按鈕時再發(fā)送更改（顯示保存）。***個選項在存在交叉字段驗證規(guī)則時不正式也不可行。而第二個選項可能需要您撤銷模型更改，如果用戶在未單擊Save的情況下導航至其他項目的話。(2)“延遲”方法：等到用戶單擊Save時再根據(jù)UI控件的新值更新模型，然后將這些更改發(fā)送至服務器。本討論主題并非Backbone.js特有，因此本文并未就此進行探討。為簡單起見，我在此處使用延遲方法。但是，我依然導入更改事件，并利用其記錄控制臺更改。我發(fā)現(xiàn)此方法在調(diào)試應用程序（特別是要確保我已經(jīng)清除綁定，請參見Close函數(shù)）時非常有效。如果您發(fā)現(xiàn)更改事件觸發(fā)多次，則可能沒有相應地清除綁定。HeaderView（第125行至第148行）Backbone.js視圖通常用于呈現(xiàn)域模型（比如W