Backbone.js: Почему во второй раз нет события?

Question

Я относительно новичок в javascript и позвоночнике. Я взламываю простой прокси-сервер для начинающих. У меня есть две точки: Home и NewEntry. Из дома я нажимаю «новая запись», чтобы получить рендеринг NewEntry. Из NewEntry я нажимаю «отменить» для рендеринга Home. Таким образом, я хотел бы переключаться между Home и NewEntry, нажимая «cancel» и «new entry» соответственно.

Однако, это не работает. Это то, что я пытаюсь сделать:

1. На домашней странице нажмите «Новая запись». NewEntry корректно отображается.
2. На NewEntry нажмите «отменить». Дом правильно отображается.
3. На домашней странице нажмите «Новая запись». NewEntry корректно отобразится правильно.
4. На NewEntry нажмите «отменить». Главная НЕ отображает. Метод, связанный с событием клика, НЕ запускается второй раз.

Я очень в тупике! Я не могу понять, почему. Я хотел бы выяснить, стреляет ли другое событие, но я не знаю, как это сделать. Кто-нибудь знает, что я должен делать?

JavaScript:

var Views = { 
    Home: Backbone.View.extend({ 
     template: $('#homeview-template').template(), 
     initialize: function() { 
      this.entries = new Collections.Entries(); 
      this.entries.on('all', this.render, this); 
      this.entries.fetch(); 
     }, 
     render: function() { 
      var currDate = getCurrentDate(); 
      var innerHtml = $.tmpl(this.template, { 
       currDate: currDate 
      }); 
      this.$el.html(innerHtml); 
      return this; 
     } 
    }), 

    NewEntry: Backbone.View.extend({ 
     template: $('#newentryview-template').template(), 
     events: { 
      'click button#cancel-new-entry': 'cancelNewEntry', 
      'all': 'logEvents' 
     }, 
     initialize: function() { 
      // currently, do nothing 
     }, 
     render: function() { 
      var innerHtml = $.tmpl(this.template); 
      this.$el.html(innerHtml) 
      return this; 
     }, 
     cancelNewEntry: function() { 
      console.log("test 1"); 
      window.router.showHome(); 
     }, 
     logEvents: function(evnt) { 
      console.log("works"); 
      console.log("event", evnt); 
     } 
    }) 
}; 

var Router = Backbone.Router.extend({ 
    initialize: function(inputs) { 
     this.homeView = new Views.Home(); 
     this.newEntryView = new Views.NewEntry(); 
     this.el = inputs.el 
    }, 

    routes: { 
     "": 'showHome', 
     "#": 'showHome', 
     'new': 'writeNewEntry' 
    }, 
    showHome: function() { 
     this.el.empty(); 
     this.navigate(""); 
     this.el.append(this.homeView.render().el); 
    }, 
    writeNewEntry: function() { 
     this.el.empty(); 
     this.navigate('new'); 
     this.el.append(this.newEntryView.render().el); 
    } 
}); 

HTML:

    <script id='homeview-template' type='text/template'> 
    <h1 class='title'>My Journal</h1> 
    <div id='curr-date-new-entry'> 
     <div id='curr-date'>${currDate}</div> 
     <div id='new-entry'> 
      <a href='#/new'>New Entry</a> 
     </div> 
    </div> 
    </script> 
    <script id='newentryview-template' type='text/template'> 
    <h1 class='title'>New Entry</h1> 
    <input id='new-entry-title' placeholder='New entry title' type='text'/> 
    <input id='new-entry-body' placeholder='New entry content' type='text'/> 
    <button id='submit-new-entry'>Submit</button> 
    <button id='cancel-new-entry'>Cancel</button> 
    </script> 

Answer 1

Это, вероятно, исправляет проблему:

writeNewEntry: function() { 
    this.el.empty(); 
    this.navigate('new'); 
    this.el.append(this.newEntryView.render().el); 
    //fix: http://backbonejs.org/#View-delegateEvents 
    this.newEntryView.delegateEvents(); 
} 

Однако, если ваш не повторно использовать взгляды, я рекомендую вам создать экземпляр мнение непосредственно по методу writeNewEntry вместо инициализации, таким образом вам не нужно будет вручную делегировать делегаты:

writeNewEntry: function() { 
    this.el.empty(); 
    this.navigate('new'); 
    this.newEntryView = new Views.NewEntry(); 
    this.el.append(this.newEntryView.render().el); 
}