骨干事件被多次调用(Backbone event being called multiple times)

我刚刚用Backbone弄湿了，我想我有一个容易解决的问题。 我有以下视图，这是一个简单的选项卡，单击时打开一个面板，当关闭时返回到选项卡：

myApp.views.Support = { Form: Backbone.View.extend({ initialize: function () { this.el = $('#support'); this._ensureElement(); }, render: function () { if (this.$el.hasClass('support-panel')) { // close panel this.$el.empty(); this.$el.removeClass('support-panel'); this.$el.addClass('support-button'); } else { // open and populate panel var template = _.template(myApp.utils.RenderTemplate('support/default'), {}); this.$el.removeClass('support-button'); this.$el.addClass('support-panel'); this.$el.html(template); } return this; }, closePanel: function () { alert('close event fired'); }, events: { 'click #SubmitFormButton': 'submitForm', 'click #CloseSupportPanel': 'closePanel' }, submitForm: function (event) { alert('form submitted: ' + $('#message')); } }) }

一切正常，除了每次点击事件发生时“closePanel”被触发+2次。 我认为这是某种清理，但我不知道是什么。

I'm just getting my feet wet with Backbone, and I think I have an easy problem to solve. I have the following view which is a simple tab that when clicked opens up a panel and when closed goes back to a tab:

myApp.views.Support = { Form: Backbone.View.extend({ initialize: function () { this.el = $('#support'); this._ensureElement(); }, render: function () { if (this.$el.hasClass('support-panel')) { // close panel this.$el.empty(); this.$el.removeClass('support-panel'); this.$el.addClass('support-button'); } else { // open and populate panel var template = _.template(myApp.utils.RenderTemplate('support/default'), {}); this.$el.removeClass('support-button'); this.$el.addClass('support-panel'); this.$el.html(template); } return this; }, closePanel: function () { alert('close event fired'); }, events: { 'click #SubmitFormButton': 'submitForm', 'click #CloseSupportPanel': 'closePanel' }, submitForm: function (event) { alert('form submitted: ' + $('#message')); } }) }

Everything is working fine except that "closePanel" gets fired +2 times every time the click event happens. I assume it's some sort of cleanup I'm missing but I don't know what.

最满意答案

可能是因为事件正在冒泡。 尝试返回false 。

Likely its because the event is bubbling up. Try returning false.

骨干事件被多次调用(Backbone event being called multiple times)

我刚刚用Backbone弄湿了，我想我有一个容易解决的问题。 我有以下视图，这是一个简单的选项卡，单击时打开一个面板，当关闭时返回到选项卡：

myApp.views.Support = { Form: Backbone.View.extend({ initialize: function () { this.el = $('#support'); this._ensureElement(); }, render: function () { if (this.$el.hasClass('support-panel')) { // close panel this.$el.empty(); this.$el.removeClass('support-panel'); this.$el.addClass('support-button'); } else { // open and populate panel var template = _.template(myApp.utils.RenderTemplate('support/default'), {}); this.$el.removeClass('support-button'); this.$el.addClass('support-panel'); this.$el.html(template); } return this; }, closePanel: function () { alert('close event fired'); }, events: { 'click #SubmitFormButton': 'submitForm', 'click #CloseSupportPanel': 'closePanel' }, submitForm: function (event) { alert('form submitted: ' + $('#message')); } }) }

一切正常，除了每次点击事件发生时“closePanel”被触发+2次。 我认为这是某种清理，但我不知道是什么。

I'm just getting my feet wet with Backbone, and I think I have an easy problem to solve. I have the following view which is a simple tab that when clicked opens up a panel and when closed goes back to a tab:

myApp.views.Support = { Form: Backbone.View.extend({ initialize: function () { this.el = $('#support'); this._ensureElement(); }, render: function () { if (this.$el.hasClass('support-panel')) { // close panel this.$el.empty(); this.$el.removeClass('support-panel'); this.$el.addClass('support-button'); } else { // open and populate panel var template = _.template(myApp.utils.RenderTemplate('support/default'), {}); this.$el.removeClass('support-button'); this.$el.addClass('support-panel'); this.$el.html(template); } return this; }, closePanel: function () { alert('close event fired'); }, events: { 'click #SubmitFormButton': 'submitForm', 'click #CloseSupportPanel': 'closePanel' }, submitForm: function (event) { alert('form submitted: ' + $('#message')); } }) }

Everything is working fine except that "closePanel" gets fired +2 times every time the click event happens. I assume it's some sort of cleanup I'm missing but I don't know what.

最满意答案

可能是因为事件正在冒泡。 尝试返回false 。

Likely its because the event is bubbling up. Try returning false.