backbone.js:イベントが2回目を発射しないのはなぜですか?
質問
JavaScriptとBackboneには比較的新しいです。私はシンプルで初心者レベルのバックボーンアプリでハッキングしています。私は2つの視点を持っています:家とニューステリー。自宅から、「新しいエントリ」をクリックしてNewEntryをレンダリングします。 NewEntryから、私は「キャンセル」をクリックして家を貸し出します。だから、それぞれ「キャンセル」と「新しいエントリ」をクリックして、自宅とニューステリーの間を切り替えたいと思います。
しかしそれはうまくいきません。これが私がやろうとしているものです:
- 家の中で「新規エントリ」をクリックしてください。 NewEntryは正しくレンダリングされます。
- NewEntryの「キャンセル」をクリックしてください。ホームレンダリング。
- 家の中で「新規エントリ」をクリックしてください。 NewEntryは再び適切にレンダリングします。
- 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
解決
これはおそらくあなたの問題を修正します:
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);
}
. 所属していません StackOverflow