backbone.js：イベントが2回目を発射しないのはなぜですか？

Question

JavaScriptとBackboneには比較的新しいです。私はシンプルで初心者レベルのバックボーンアプリでハッキングしています。私は2つの視点を持っています：家とニューステリー。自宅から、「新しいエントリ」をクリックしてNewEntryをレンダリングします。 NewEntryから、私は「キャンセル」をクリックして家を貸し出します。だから、それぞれ「キャンセル」と「新しいエントリ」をクリックして、自宅とニューステリーの間を切り替えたいと思います。

しかしそれはうまくいきません。これが私がやろうとしているものです：

1. 家の中で「新規エントリ」をクリックしてください。 NewEntryは正しくレンダリングされます。
2. NewEntryの「キャンセル」をクリックしてください。ホームレンダリング。
3. 家の中で「新規エントリ」をクリックしてください。 NewEntryは再び適切にレンダリングします。
4. NewEntryの「キャンセル」をクリックしてください。家はレンダリングしません。クリックイベントに関連付けられているメソッドは2回目になりません。

   私は非常に軽い停止しています！なぜ把握することはできません。別のイベントが発射されているかどうかを把握したいのですが、私はどのようにわかりません。誰かが私がするべきことを知っていますか？

   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： Generalacodicetagpre

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上で直接ビューをインスタンス化することをお勧めします。このようにして、手動でDeleGateEventsを呼び出す必要はありません：

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

.