Backbone.js：为什么事件不是第二次触发？

Question

我对JavaScript和骨干相对来说比较陌生。我正在攻击一个简单的初学者级主干应用程序。我有两种观点：家庭和NewEntry。在家中，我点击“新条目”来渲染NewEntry。从NewEntry，我点击“取消”来渲染Home。所以，我想通过分别点击“取消”和“新条目”在Home和NewEntry之间切换。

但是，它不起作用。这是我试图做的：

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而不是初始化，这样你就不需要手动调用delegateEvents：

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