Backbone.js: Pourquoi l'événement n'est-il pas licencié la deuxième fois?

Question

Je suis relativement nouveau à JavaScript et à la colonne vertébrale. Je pirate sur une application de backbone de niveau débutant simple. J'ai deux points de vue: la maison et la nouvelle poule. De la maison, je clique sur "Nouvelle entrée" pour se rendre à Newenterry. De Newynery, je clique sur "Annuler" pour rendant la maison. Donc, je voudrais basculer entre la maison et les nouveautés en cliquant sur "Annuler" et "Nouvelle entrée" respectivement.

Cependant, cela ne fonctionne pas. C'est ce que j'essaie de faire:

1. à la maison, cliquez sur "Nouvelle entrée". Newoundy rend correctement.
2. sur NEWNENTRY, cliquez sur "Annuler". La maison rend correctement.
3. à la maison, cliquez sur "Nouvelle entrée". NewenterRy rend à nouveau correctement.
4. sur NEWNENTRY, cliquez sur "Annuler". La maison ne rend pas. La méthode associée à l'événement de clic ne tire pas une seconde fois.

   Je suis extrêmement coupé! Je ne peux pas comprendre pourquoi. J'aimerais savoir si un événement différent est en train de tirer, mais je ne sais pas comment. Est-ce que quelqu'un sait ce que je devrais faire?

   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

Cela corrige probablement votre problème:

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

Toutefois, si vos vues ne réutilisent pas, je vous recommanderai d'instancier la vue directement sur la méthode Wrighenewentry au lieu d'initialiser, de cette manière, vous n'aurez pas besoin d'appeler manuellement des délégateurs:

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