骨幹視圖不會覆蓋繼承事件

Question

我想覆蓋已被繼承的事件。我有這個想法從here

但是不管我怎麼努力也不會取代原來的事件：

父視圖：

SD.defaultView = function(){ //Default controller for all views 
    //extend the view with the default home view 
    var HomeView = Backbone.View.extend({ 
     el: 'body > shell', 
     events: { //Add click events for global clicks 
      'click footer saveBox': 'saveBox', 
     }, 
     render: function() { 
      //make sure we are logged in, if we are not forward back to home page 
      SD.login.checkLoginState(); 

      //Output correct tempalte 
      this.$el.html(templatesNeeded); 
     }, 
     saveBox: function(){ 
      //Now we have added the who reload the sex details page. 
      SD.pageLoad(SD.CURRENTSEX); 
     }, 
    }); 
    SD.DV = new HomeView(); 
    SD.DV.render(); 
    return HomeView; 
}(); 

子視圖：

//set up homeview 
var whoAdd = SD.defaultView.extend({ 
    el: 'page', 
    events: function(){ 
     return _.extend({},SD.defaultView.prototype.events,{ 
      'keyup #who': 'otherFunctions', 
      'click addContact': 'otherFunctions', 
      'click footer saveBox' : 'addWho' 
     }); 
    }, 
    template: JST['app/www/js/templates/details/whoAdd.ejs'], 
    addWho: function(el){ 
     c(el); 
    }, 
    render: function() { 
     myself = this; 
     this.$el.html(this.template); 
     $('save').addClass('disabled'); 
     SD.setTitle('Who was involved?'); 
    } 
}); 

目前saveBox將被正常綁定。然而，我所看到的所有例子都不像我那樣發起觀點。我從一個自動執行的函數返回視圖，但這不應該導致問題，我認爲繼承可能會在某些地方出現。

Answer 1

你啓動上定義父視圖的的問題。

父視圖的Click事件被初始化時，你在父視圖中添加做。

在孩子看來，當你需要父視圖擴展它你實際上正重新實例化對象，就已經在父元素添加單擊處理程序。

一旦你在孩子延長父對象，因爲單擊處理程序已經被綁定，你只是增加一個點擊處理程序上，你父已經添加了一個頂部。

如果您沒有實例化定義的父視圖，那麼擴展事件應該按照計劃進行。

Answer 2

你的想法很紮實，代碼只有幾個問題。我根據您的想法創建了this working jsfiddle。它顯示共享事件的父 - >子視圖類。

您的問題標題提到「覆蓋繼承的事件」。你會注意到在jsfiddle中，子視圖事實上覆蓋了父事件。我必須手動調用父級的子級內的事件處理程序才能運行。

這裏是你的代碼的重構更喜歡的jsfiddle

var SD = {}; 

SD.DefaultView = (function(){ //Default controller for all views 
    //extend the view with the default home view 
    var HomeView = Backbone.View.extend({ 
     … 
     events: { //Add click events for global clicks 
      'click footer saveBox': 'saveBox', 
     } 
     … 
    }); 
    return HomeView; 
})(); 

//set up homeview 
SD.WhoAddView = (function() { 
    var WhoAddView = SD.DefaultView.extend({ 
     … 
     events: function(){ 
      return _.extend({},SD.DefaultView.prototype.events,{ 
       'keyup #who': 'otherFunctions', 
       'click addContact': 'otherFunctions', 
       'click footer saveBox' : 'addWho' 
      }); 
     } 
     … 
    }); 
    return WhoAddView; 
})(); 

… 

var view = new SD.WhoAddView(); 
$('body').append(view.render().el);