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

Question

Я относительно новый для JavaScript и Backbone. Я взломаю простое приложение для новичка на новичке. У меня есть два взгляда: домой и новость. Из дома я нажимаю на «новую запись», чтобы добраться до новой целости. Из Newentry я нажимаю на «Отмена», чтобы сделать домой. Итак, я бы хотел переключаться между домом и новым преимуществом, нажав на «Отмена» и «Новую запись» соответственно.

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

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

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

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

.

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

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

.