2013-12-18 28 views
2

我想了解這個tutorial這個樣本骨幹代碼,但我無法理解我們爲什麼需要這個dummy function - 任何想法它是什麼?骨幹教程:model.destroy +刪除和不提示功能

Backbone.sync = function(method, model, success, error){ 
    success(); 
    } 

然後,removeunrender功能似乎是相同的 - 爲什麼我們需要他們兩個?

什麼是這行,

this.model.bind('remove', this.unrender); 

,而我們已綁定了remove功能和click事件到DOM?

也,我們已經在這條線綁定的所有功能(包括unrender),

_.bindAll(this, 'render', 'unrender', 'swap', 'remove'); 

所以爲什麼我們需要下面這條線?

this.model.bind('remove', this.unrender); 

你可以閱讀從上面的教程整個代碼,這裏是它的一些,

// `Backbone.sync`: Overrides persistence storage with dummy function. This enables use of `Model.destroy()` without raising an error. 
    Backbone.sync = function(method, model, success, error){ 
    success(); 
    } 

    var Item = Backbone.Model.extend({ 
    defaults: { 
     part1: 'hello', 
     part2: 'world' 
    } 
    }); 

    var List = Backbone.Collection.extend({ 
    model: Item 
    }); 

    var ItemView = Backbone.View.extend({ 
    tagName: 'li', // name of tag to be created 
    // `ItemView`s now respond to two clickable actions for each `Item`: swap and delete. 
    events: { 
     'click span.swap': 'swap', 
     'click span.delete': 'remove' 
    }, 
    // `initialize()` now binds model change/removal to the corresponding handlers below. 
    initialize: function(){ 
     _.bindAll(this, 'render', 'unrender', 'swap', 'remove'); // every function that uses 'this' as the current object should be in here 

     this.model.bind('change', this.render); 
     this.model.bind('remove', this.unrender); 
    }, 
    // `render()` now includes two extra `span`s corresponding to the actions swap and delete. 
    render: function(){ 
     $(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span> &nbsp; &nbsp; <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>'); 
     return this; // for chainable calls, like .render().el 
    }, 
    // `unrender()`: Makes Model remove itself from the DOM. 
    unrender: function(){ 
     $(this.el).remove(); 
    }, 
    // `swap()` will interchange an `Item`'s attributes. When the `.set()` model function is called, the event `change` will be triggered. 
    swap: function(){ 
     var swapped = { 
     part1: this.model.get('part2'), 
     part2: this.model.get('part1') 
     }; 
     this.model.set(swapped); 
    }, 
    // `remove()`: We use the method `destroy()` to remove a model from its collection. Normally this would also delete the record from its persistent storage, but we have overridden that (see above). 
    remove: function(){ 
     this.model.destroy(); 
    } 
    }); 

回答

2

本教程中存在dummy function,因此可以在沒有API的情況下使用某些Backbone函數與服務器通信以添加/更新/刪除數據。當您撥打Model.destroy()時,Backbone會默認向您的服務器發送DELETE請求。如果你沒有在你的模型中指定一個url,它會引發一個錯誤。通過放入虛函數,它將覆蓋嘗試向URL發送請求的默認操作,這在本教程中不存在;相反,它只會模擬HTTP請求是否成功,即使它沒有實際調用服務器。

this.model.bind('remove', this.unrender);在模型被移除時偵聽,並在視圖中調用unrender函數,該函數刪除模型與(或曾)關聯的視圖。基本上,該模型在被移除時會發出一個'remove'事件,該事件被綁定獲取。

_.bindAll(this, 'render', 'unrender', 'swap', 'remove');是否存在,因此如果您在任何這些函數中使用了this(渲染,未渲染,交換,刪除)。根據功能的不同,this可能會丟失上下文並引用視圖以外的內容。這確保this始終引用該視圖。

+0

awww感謝您解釋'虛擬功能'。現在我明白它的意義了! :D – laukok

1

不要混淆下劃線的bindall和骨幹bind爲他們服務完全不同的目的。

_.bindall(this, ...)爲每個事件設置上下文,以便在調用處理程序時,this(本例中爲視圖)作爲上下文傳遞。

this.model.bind('remove', this.unrender)使得this.unrender被稱爲當模型被移除時,觸發remove事件被結合一個事件處理程序


通常sync會打電話給您的數據存儲;虛擬函數只是直接調用成功回調函數,這樣看起來調用成功了。

+0

非常感謝您幫助理解:) – laukok

1

的_.bindAll() - 函數是一個Underscore.js功能,設置範圍的功能(即定義了 「本」)

設置

_.bindAll(this, 'render', 'unrender', 'swap', 'remove');

確保使用ItemView實例執行函數'render','unrender','swap'和'remove'作爲「this」

另一方面,行this.model.bind('remove', this.unrender);將模型上的remove事件綁定到「未渲染」 -功能。

this.model.bind的使用已被替換爲this.model.on,它也接受了第三個參數,範圍。

所以,你可以安全地從_.bindAll刪除 '渲染' 和 'unrender' 做

this.model.on('change', this.render, this); 
    this.model.on('remove', this.unrender, this); 

據我瞭解,你可以做:

remove: function(){ 
    $(this.el).remove(); 
    this.model.destroy(); 
} 

和跳過this.model.on('remove', this.unrender, this);,因此是不髮色的功能。但是,通過示例中使用的方法,只要在模型中調用destroy()時視圖就會將其本身從DOM中刪除,因此它更通用

+0

非常感謝您幫助理解和建議:) – laukok