重新加載模板時的Backbone bind事件

Question

我剛開始傾斜Backbone，並且下劃線模板，不確定結構是否適合它。

問題是，當我重新加載模板時，如何從重新綁定事件函數的Backbone重新綁定事件。

這個例子只是加載一個索引頁面，在頁面中插入main_option模板，並在main_option和role_view模板之間跳轉。

這裏是我把路由器在那裏app.js：

define(['jquery', 'underscore', 'backbone', 'views/role_view', 'views/main_options'], function ($, _, Backbone, rolePage, mainOptions) { 

var appRouter = Backbone.Router.extend({ 

    $el: $('.container'), 

    initialize: function() { 
     this.mainOptionPage = mainOptions; 
     this.loginView = rolePage; 

    }, 

    routes: { 
     "": "mainOption", 
     "views/role_view": "login" 
    }, 

    mainOption: function() { 

     this.$el.html(this.mainOptionPage.render().$el); 
    }, 

    login: function() { 
     this.$el.html(this.loginView.render().$el); 

    } 
}); 

var router = new appRouter(); 
Backbone.history.start(); 

}); 

這裏是main_option.js

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){ 

var Person = Backbone.Model.extend({ 
    defaults: { 
     name: 'Guest Worker', 
     age: 23, 
     occupation: 'worker' 
    } 
}); 

var testView = Backbone.View.extend({ 
    $el: $('#indexPage'), 

    initialize: function() { 
     var self = this; 
     $.get('/test/templates/mainOptions.html').success(function (data) { 
      self.template_loaded(data); 
      template = _.template(data, {name: "Test"}); 
     }, 'html'); 

    }, 
    events: { 
     'click .signButton': 'pageToSign' 
    }, 



    pageToSign: function (e) { 
     e.preventDefault(); 

     Backbone.history.navigate("views/role_view", {trigger: true}); 
    }, 

    template_loaded: function (html) { 
     var template = _.template(html, {name: "Test"}); 

     this.$el.html(template); 
     return this; 
    } 
}); 
var person = new Person; 

return new testView({model: person}); 
}); 

和最後一頁是role_view.js

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){ 

var role = Backbone.View.extend({ 


    initialize: function(){ 
     var self = this; 

     $.get('/test/templates/chooseRole.html').success(function(html){ 
      self.template_loaded(html); 
     }); 
    }, 

    events: { 
     'click .parentButton': 'parentClick' 
    }, 

    template_loaded: function(html) { 
     var template = _.template(html, {name: "Test"}); 

     this.$el.html(template); 
     return this; 
    }, 

    parentClick: function(e) { 
     e.preventDefault(); 
     Backbone.history.navigate("", {trigger: true}); 
    } 


}); 

return new role(); 
}); 

謝謝。

Answer 1

你真正的問題是你重複使用視圖而不是根據需要銷燬和創建視圖。在你的路由器，你有這樣的：

mainOption: function() { 
    this.$el.html(this.mainOptionPage.render().$el); 
}, 
login: function() { 
    this.$el.html(this.loginView.render().$el); 
} 

你叫this.$el.html第一次，視圖上升，一切似乎好起來的。然後你通過調用this.$el.html來切換視圖，一切似乎仍然可以。但下一次你切換視圖時，你的事件就沒有了。這是因爲jQuery的html函數工作的方式;從fine manual：

當.html()用於設置一個元素的內容，這是在該元素的任何內容完全是由新的內容替換。 另外，在用新內容替換這些元素之前，jQuery會從子元素中移除其他構造，例如數據和事件處理程序。

強調我的。調用this.$el.html將銷燬先前內容的事件綁定（例如this.mainOptionsPage.el或this.loginView.el）。

如果你根據需要創建和銷燬的觀點：

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){ 
    // Your Person model goes in its own file or possibly in the router file for now... 
    var TestView = Backbone.View.extend({ 
     //... 
    }); 
    return TestView; // Return the view "class", not an instance. 
}); 

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){ 
    var Role = Backbone.View.extend({ 
     //... 
    }); 
    return Role; 
}); 

define(['jquery', 'underscore', 'backbone', 'views/role_view', 'views/main_options', 'models/person'], function ($, _, Backbone, Role, TestView, Person) { 
    var person = new Person; // The person model is managed here. 
    var appRouter = Backbone.Router.extend({ 
     //... 
     initialize: function() { 
      // Don't need anything in here anymore. 
     }, 
     //... 
     mainOption: function() { 
      // Create a new view when we need it. 
      this.switchTo(new TestView({ model: person })); 
     }, 
     login: function() { 
      // Create a new view when we need it. 
      this.switchTo(new Role); 
     }, 
     switchTo: function(view) { 
      // Destroy the old view since we don't need it anymore. 
      if(this.currentView) 
       this.currentView.remove(); 

      // Keep track of the new current view so that we can 
      // kill it alter and avoid leaks. 
      this.currentView = view; 

      this.$el.html(this.currentView.render().el); 
     } 
    }); 
    //... 
});