backbone.js：为什么第二次射击事件？

Question

我对JavaScript和骨干相对较新的。我正在黑客攻击一个简单的初级级骨干应用程序。我有两个意见：家庭和新闻。从家里，我点击“新条目”以获得渲染redentry。来自Newentry，我点击“取消”渲染家庭。所以，我想通过点击“取消”和“新条目”分别在家庭和新闻中切换。 但是，它不起作用。这就是我尝试做的：

1. 在家上，单击“新条目”。换行符效果正确。
2. 在redentry，点击“取消”。家庭渲染正确。
3. 在家上，单击“新条目”。换行机再次渲染。
4. 在redentry，点击“取消”。家没有渲染。与点击事件关联的方法第二次没有发射。

   我非常难忘！我无法弄清楚为什么。我想弄清楚不同的事件是否正在射击，但我不知道如何。有人知道我应该怎么做？

   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);
}

.