события не срабатывают при создании одного экземпляра представления, но работают при создании экземпляра mutliple.

Question

Я полный новичок в Backbone и пытаюсь раздобыть несколько вещей. Я пытаюсь создать что-то с помощью jQuery mobile и Backbone. Вы можете найти свой код ниже

var WelcomePage = Backbone.View.extend({ 
     initialize:function() { 
      this.template = _.template($("#welcome_template").html()); 
     }, 

     render:function (eventName) { 
      $(this.el).html(this.template()); 

      return this; 
     }, 

     events:{ 
      "click .btn_continue" : function(){ 
       appRouter.navigate('login',{trigger: true}); 
      } 
     } 
    }); 

var Login = Backbone.View.extend({ 
     initialize:function() { 
      this.template = _.template($("#login_template").html()); 
     }, 

     render:function (eventName) { 
      $(this.el).html(this.template()); 

      return this; 
     }, 

     events:{ 
      "click .btn_login" : function(){ 
       appRouter.navigate('dashboard',{trigger: true});    
      } 
     } 
    }); 

var Dashboard = Backbone.View.extend({ 
     initialize:function() { 
      this.template = _.template($("#dashboard_template").html()); 
     }, 

     render:function (eventName) { 
      $(this.el).html(this.template()); 

      return this; 
     }, 

     events:{ 
      "click .btn_loadImages" : function(){ 
       console.log('load Images'); 
      } 
     } 
    }); 


var Router = Backbone.Router.extend({ 
     routes:{ 
      "":"welcome", 
      "login":"login", 
      "dashboard":"dashboard", 
     }, 

     initialize:function() { 
     }, 

     welcome:function() { 
      this.changePage(new WelcomePage()); 
     }, 

     login:function() { 
      this.changePage(new Login()); 
     }, 

     dashboard:function(){ 
      this.changePage(new Dashboard()); 
     }, 

     changePage:function (page) { 
      $(page.el).attr('data-role', 'page'); 
      page.render(); 
      $('body').append($(page.el)); 


      $.mobile.changePage($(page.el), {changeHash:false, transition: 'slide'}); 
     } 

    }); 

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

Теперь, когда я туда и обратно через экраны с помощью кнопки НАЗАД события срабатывала OK, используя код, приведенный выше. Тогда я попытался заменить код маршрутизатора с кодом ниже

var Router = Backbone.Router.extend({ 
      routes:{ 
       "":"welcome", 
       "login":"login", 
       "dashboard":"dashboard", 
      }, 

      initialize:function() { 
      }, 

      welcome:function() { 
       this.changePage(v_WelcomePage); 
      }, 

      login:function() { 
       this.changePage(v_Login); 
      }, 

      dashboard:function(){ 
       this.changePage(v_Dashboard); 
      }, 

      changePage:function (page) { 
       $(page.el).attr('data-role', 'page'); 
       page.render(); 
       $('body').append($(page.el)); 


       $.mobile.changePage($(page.el), {changeHash:false, transition: 'slide'}); 
      } 

     }); 

     var v_WelcomePage = new WelcomePage(); 
     var v_Login = new Login(); 
     var v_Dashboard = new Dashboard(); 

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

я заметил, когда я возвращаюсь к предыдущим экранам событий прекратить огонь. Вместо того, чтобы создавать экземпляр представления в действии маршрутизатора, я создал его снаружи и вызываю его каждый раз. Надеюсь, что это будет иметь смысл.

Любой совет, который очень ценится.

Answer 1

События подключаются при помощи jQuery, когда представление создается, а не отображается (в функции конструктора Backbone View). jQuery отключает эти события, когда html удаляется со страницы (возможно, в $.mobile.changePage).

Итак, во второй раз, когда вы визуализируете страницу, события не будут восстановлены. Вы можете попробовать позвонить page.delegateEvents(), чтобы вручную связать события снова, или вы можете повторно создавать представление каждый раз.