backbone.js:为什么第二次射击事件?
题
我对JavaScript和骨干相对较新的。我正在黑客攻击一个简单的初级级骨干应用程序。我有两个意见:家庭和新闻。从家里,我点击“新条目”以获得渲染redentry。来自Newentry,我点击“取消”渲染家庭。所以,我想通过点击“取消”和“新条目”分别在家庭和新闻中切换。 但是,它不起作用。这就是我尝试做的:
- 在家上,单击“新条目”。换行符效果正确。
- 在redentry,点击“取消”。家庭渲染正确。
- 在家上,单击“新条目”。换行机再次渲染。
- 在redentry,点击“取消”。家没有渲染。与点击事件关联的方法第二次没有发射。
我非常难忘!我无法弄清楚为什么。我想弄清楚不同的事件是否正在射击,但我不知道如何。有人知道我应该怎么做?
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>
解决方案
这可能修复了您的问题:
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: function() {
this.el.empty();
this.navigate('new');
this.newEntryView = new Views.NewEntry();
this.el.append(this.newEntryView.render().el);
}
. 不隶属于 StackOverflow