Backbone.js學(xué)習(xí)筆記：圖書(shū)案例-事件綁定

caige 發(fā)布于2019-08-21 10:26 / 1080人閱讀

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

  前言： 我們繼續(xù)使用上一次寫(xiě)的圖書(shū)案例，在基礎(chǔ)上面進(jìn)行改進(jìn)！

事件綁定

在我們?yōu)g覽網(wǎng)頁(yè)的時(shí)候，獲取數(shù)據(jù)并不是一下只就全部獲取到的，為了創(chuàng)建一個(gè)更好的用戶(hù)體驗(yàn)，就來(lái)模擬一個(gè)加載（Spinner）的圖片來(lái)告訴用戶(hù)正在獲取數(shù)據(jù)中！

當(dāng)用戶(hù)在瀏覽詳細(xì)視圖（books/:BookName），只需要調(diào)用加載數(shù)據(jù)的方法。然后，因?yàn)樵O(shè)置了正確的監(jiān)聽(tīng)器，當(dāng)接受到新的數(shù)據(jù)的時(shí)候，視圖就會(huì)自動(dòng)更新。數(shù)據(jù)更新的時(shí)候，Backbone支持多事件和自定義事件。

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

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

除了bookView類(lèi)，其他都不會(huì)改變。添加構(gòu)造函數(shù)或者initialize方法，initialize方法是Backbone里面的一個(gè)特殊的字符屬性。每個(gè)實(shí)例初始化的時(shí)候都會(huì)調(diào)用這個(gè)屬性對(duì)應(yīng)的方法。

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

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

上面的代碼做了兩件簡(jiǎn)單的事情：

當(dāng)模型改變時(shí)候調(diào)用render()函數(shù)

當(dāng)事件spinner觸發(fā)時(shí)調(diào)用showSpinner()函數(shù)

然后spinner怎么辦呢？，那就用一個(gè)簡(jiǎn)單的gif圖片把！在bookView里創(chuàng)建一個(gè)新的屬性：

templateSpinner: ""

spinner圖片（上網(wǎng)找一大堆）：

接著回到一開(kāi)始那個(gè)loadBook函數(shù)里面，繼續(xù)寫(xiě)代碼：

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

里面觸發(fā)了spinner事件，還有為了解決作用域的問(wèn)題，需要在閉包里面訪(fǎng)問(wèn)this。

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

最后把render函數(shù)里面多余的代碼去掉，實(shí)現(xiàn)showSpinner函數(shù)：

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

讓后打開(kāi)瀏覽器訪(fǎng)問(wèn)index.html#books/book1，如果可以看到加載的圖片的話(huà)，就證明成功啦！

最后附上完整的代碼