Subclass a Backbone.View子類和保留事件

Question

我有一個Backbone.View的通用子類，它有一個close事件偵聽器。

var GenericView = Backbone.View.extend({ 

    events : { 
     "click .close" : "close" 
    }, 

    close : function() { 
     console.log("closing view"); 
    } 

}); 

我想子類化這個泛型類並添加一些新的事件。但是，下面將覆蓋超類（上）事件對象。例如。

var ImplementedView = new GenericView({ 

    // setting this will stop 'close' in Super Class from triggering 
    events : { 
     "click .submit" : "submit" 
    } 

}); 

我應該如何創建一個子類，在這種情況下ImplementedView並保留事件？

我已經找到了一種方法來實現這一點，通過在構造子類時擴展事件對象。不過，我需要重新觸發this.delegateEvents()，我猜測這並不好。任何人可以對此發表評論嗎？

var ImplementedView = new GenericView({ 

    initialize : function (options) { 

     _.extend(this.events, { 
      "click .submit" : "submit" 
     }); 

     // re-attach events 
     this.delegateEvents(); 
    } 

}); 

Answer 1

@Nupul是完全正確的：你沒有繼承你的GenericView。

事實上，子類化在這裏並不是真正的詞，因爲JavaScript不會做經典的繼承。

因此，讓我們第一次嘗試和了解這裏發生了什麼：

var GenericView = Backbone.View.extend(propertiesObj, classPropertiesObj) 

Backbone.View是一個構造函數，當與new關鍵字調用，爲您創建一個新的對象。

由於這是JS，所有功能都真正發揮作用的對象，所以Backbone.View.extend只是掛Backbone.View，做了幾件事情的函數：

1. 它設置了原型鏈，這樣你就可以訪問屬性和調用「基地」定義函數類
2. 創建並返回一個新構造函數可以調用（這裏是GenericView）實例
3. 將自身複製到被函數掛在你的繼承類的對象它返回的構造函數這樣你可以進一步繼承。

所以設置你想要的protoype鏈正確的方法是：

var ImplementedView = GenericView.extend({ 
    // implementation goes here 
}); 

和NOT：

var ImplementedView = new GenericView({//stuff}); 

，因爲這只是創建了一個GenericView的新實例。現在

，你還有一個問題，因爲當你做這樣的事情：

var impl_view = new ImplementedView; 

impl_view.events; // This isn't merged with the events you created 
        // for the GenericView 

在這一點上有不同的方式來得到你想要的結果，下面是一個使用delegateEvents種怎麼樣你沒有。順便說一句，使用它並不壞。

var GenericView = Backbone.View.extend({ 

    genericEvents: { 'click .close': 'close' }, 

    close: function() { console.log('closing view...'); } 

}); 

var ImplView = GenericView.extend({ 

    events: { 'click .submit': 'submit' }, 

    initialize: function(options) { 
    // done like this so that genericEvents don't overwrite any events 
    // we've defined here (in case they share the same key) 
    this.events = _.extend({}, this.genericEvents, this.events); 
    this.delegateEvents() 
    } 
}); 

Answer 2

你會發現這個有用：http://kalimotxocoding.blogspot.com/2011/03/playing-with-backbonejs-views.html

秒我提及_.extend(...)和你目前有...

Answer 3

另一種選擇是使BaseView覆蓋Extend的實現。如：

var BaseView = Backbone.View.extend({ 
     //base view functionality if needed 
    }); 
BaseView.extend = function(child){ 
    var view = Backbone.View.extend.apply(this, arguments); 
    view.prototype.events = _.extend({}, this.prototype.events, child.events); 
    return view; 
}; 

這將自動擴展您的所有事件，以繼承BaseView的所有事件。

Answer 4

我喜歡剃鬚刀先生的解決方案，但對於較少侵入的東西：

var ChildView = ParentView.extend({ 
    events : _.extend({ 
     "change input": "handleInputChange" 
    }, ParentView.prototype.events) 
}); 

編輯：是的，你必須這樣做在每個子類中，但只需要幾個孩子時，它的有用，或者當你不控制父母「班級」時。

Answer 5

這是一個很適合我的解決方案。您可以在父類和子類中使用events對象，而不必在每個子類中擴展它。只要在父類中擴展一次：

APP.Views.GenericWizard = Backbone.View.extend({ 
    events: { 
    'click .btn-prev' : function(){} 
    }, 
    initialize: function() { 
    _(this.events).extend(APP.Views.GenericWizard.prototype.events); 
    } 
}); 

APP.Views.RegisterWizard = APP.Views.GenericWizard.extend({ 
    events: { 
    'blur #username' : function(){} 
    }, 
}); 

var registerWizard = new APP.Views.RegisterWizard(); 
console.log(registerWizard.events); 
// Object {blur #username: function, click .btn-prev: function}