Backbone.js: perché l'evento non è attiva la seconda volta?

Question

Sono relativamente nuovo a JavaScript e Backbone. Sto hackerando una semplice app backbone di livello principiante. Ho due viste: casa e Newentry. Da casa, clicco su "Nuova voce" per rendere il Newentry. Da Newentry, clicco su "Annulla" per rendere a casa. Quindi, vorrei passare da casa e Newentry facendo clic su "Annulla" e "Nuova voce" rispettivamente.

Tuttavia, non funziona. Questo è quello che provo a fare:

.
1. A casa, fai clic su "Nuova voce". Newentry rende correttamente.
2. su Newentry, fai clic su "Annulla". Rendering a casa correttamente.
3. A casa, fai clic su "Nuova voce". Newentry rende di nuovo correttamente.
4. su Newentry, fai clic su "Annulla". La casa non rende. Il metodo associato con l'evento click non spara una seconda volta.

   Sono estremamente scatenato! Non riesco a capire perché. Mi piacerebbe capire se un evento diverso è sparato, ma non so come. Qualcuno sa cosa dovrei fare?

   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

Questo probabilmente risolve il tuo problema:

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

.

Comunque se non stai riutilizzando le viste ti consiglierei di istanziare la vista direttamente sul metodo scritto WriteNewentry anziché inizializza, in questo modo non è necessario chiamare manualmente Delegagevents:

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

.