Backbone.js學習筆記：圖書案例-事件綁定

caige 發布于2019-08-21 10:26 / 1075人閱讀

摘要：數據更新的時候，支持多事件和自定義事件。然后使用兩個事件和的自定義事件。我們將使用別名函數。是為了模擬從服務器獲取響應的時間。在它內部里面，使用和返回模型屬性把選中的模型賦值給當前視圖的模型。

前言：我們繼續使用上一次寫的圖書案例，在基礎上面進行改進！

事件綁定

在我們瀏覽網頁的時候，獲取數據并不是一下只就全部獲取到的，為了創建一個更好的用戶體驗，就來模擬一個加載（Spinner）的圖片來告訴用戶正在獲取數據中！

當用戶在瀏覽詳細視圖（books/:BookName），只需要調用加載數據的方法。然后，因為設置了正確的監聽器，當接受到新的數據的時候，視圖就會自動更新。數據更新的時候，Backbone支持多事件和自定義事件。

改變路由程序里面的代碼：

// 渲染Books頁面
loadBook: function (bookName){
    this.bookView.loadBook(bookName);
}

除了bookView類，其他都不會改變。添加構造函數或者initialize方法，initialize方法是Backbone里面的一個特殊的字符屬性。每個實例初始化的時候都會調用這個屬性對應的方法。

然后使用兩個事件——change和spinner的自定義事件。我們將使用on()(別名bind)函數。

initialize: function (){
    this.model = new (Backbone.Model.extend({}));
    this.model.bind("change", this.render, this);
    this.bind("spinner", this.showSpinner, this);
}

上面的代碼做了兩件簡單的事情：

當模型改變時候調用render()函數

當事件spinner觸發時調用showSpinner()函數

然后spinner怎么辦呢？，那就用一個簡單的gif圖片把！在bookView里創建一個新的屬性：

templateSpinner: ""

spinner圖片（上網找一大堆）：

接著回到一開始那個loadBook函數里面，繼續寫代碼：

loadBook: function (bookName){
    this.trigger("spinner");
    // 出現加載圖片
    var me = this;
    // 需要在閉包訪問this
    setTimeout(function (){
        // 模擬從服務器獲取數據要的時間
        me.model.set(me.collection.where({
            name: bookName
        })[0].attributes);
    }, 1000);
}

里面觸發了spinner事件，還有為了解決作用域的問題，需要在閉包里面訪問this。

setTimerout是為了模擬從服務器獲取響應的時間。在它內部里面，使用model.set()和model.attributes(返回模型屬性)把選中的模型賦值給當前視圖的模型。

最后把render函數里面多余的代碼去掉，實現showSpinner函數：

render: function (bookName){
    var bookHtml = this.template(this.model);
    $("body").html(bookHtml);
},
showSpinner: function (){
    $("body").html(this.templateSpinner);
}

讓后打開瀏覽器訪問index.html#books/book1，如果可以看到加載的圖片的話，就證明成功啦！

最后附上完整的代碼

backbone日常練習

GPU云服務器云服務器 backbone.js 機器學習圖書推薦事件綁定重復綁定事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85520.html

Backbone.js學習筆記（一）

摘要：它通過數據模型進行鍵值綁定及事件處理，通過模型集合器提供一套豐富的用于枚舉功能，通過視圖來進行事件處理及與現有的通過接口進行交互。本人兼職前端付費技術顧問，如需幫助請加本人微信hawx1993或QQ345823102，非誠勿擾 1.為初學前端而不知道怎么做項目的你指導 2.指導并扎實你的JavaScript基礎 3.幫你準備面試并提供相關指導性意見 4.為你的前端之路提供極具建設性的...

FrancisSoung 2019-08-21 10:21 評論0 收藏0
Backbone.js學習筆記（二）細說MVC

摘要：因為是一條數據記錄，也就是說，相當于是一個數據集。通常我們需要重載函數，聲明，以及通過或為視圖指定根元素。通過綁定視圖的函數到模型的事件模型數據會即時的顯示在中。實例屬性參數以及類屬性參數會被直接注冊到集合的構造函數。對于初學backbone.js的同學可以先參考我這篇文章：Backbone.js學習筆記（一） Backbone源碼結構 showImg(https://segme...

taoszu 2019-08-21 10:29 評論0 收藏0
2017年前端流行的數百個javascript庫，你會幾個？

摘要：有數百個免費的庫出來，為應用程序選擇正確的框架變得非常困難。是流行的驅動技術之一，由于年創建。在這三個塊中，有幾個暴露低層接口的綁定。反應由，和許多開發人員和個人的社區維護。誕生于年，是一個輕量級的框架。有數百個免費的JS庫出來，為應用程序選擇正確的JavaScript框架變得非常困難。一些開發商最終會拋棄，而其他開發者則迅速發展，并得到廣泛采用。許多開發人員只知道像jQuery和R...

CoXie 2019-08-20 15:29 評論0 收藏0
帶你讀Backbone源碼解讀之Events實現

摘要：接受個參數，包括事件的名稱，回調函數和回調函數執行的上下文環境。保留回調函數在數組中取出對應的以及中的函數。當然，你同樣可以在綁定的回調函數執行前手動通過將其移除。 Backbone源碼解讀 Backbone在流行的前端框架中是最輕量級的一個，全部代碼實現一共只有1831行1。從前端的入門再到Titanium，我雖然幾次和Backbone打交道但是卻對它的結構知之甚少，也促成了我想讀...

AndroidTraveler 2019-08-21 10:28 評論0 收藏0
backbone源碼解讀

摘要：個人認為，讀懂老牌框架的源代碼比會用流行框架的要有用的多。另外，源代碼中所有的以開頭的方法，可以認為是私有方法，是沒有必要直接使用的，也不建議用戶覆蓋。寫在前面 backbone是我兩年多前入門前端的時候接觸到的第一個框架，當初被backbone的強大功能所吸引(當然的確比裸寫js要好得多)，雖然現在backbone并不算最主流的前端框架了，但是，它里面大量設計模式的靈活運用，以及令...

Kross 2019-08-20 14:08 評論0 收藏0