Backbone trigger two methods in one event
Solution 1
You can pass a wrapper function in your hash of events to call your two methods.
From http://backbonejs.org/#View-delegateEvents
Events are written in the format
{"event selector": "callback"}
. The callback may be either the name of a method on the view, or a direct function body.
Try
events: {
'click .search-button': 'setModelTerm',
'change .source-select': function(e) {
this.setModelSourceId(e);
this.activateSource(e);
}
},
Solution 2
The only thing that is keeping you from adding the same event/selector pair is that events
is a hash - jQuery can handle multiple bindings to the same element/event pair. Good news though, jQuery events allow you to namespace events by adding a .myNamespace
suffix. Practically speaking, this produces the same results but you can generate many different keys.
var MyView = Backbone.View.extend({
events: {
'click.a .foo': 'doSomething',
'click.b .foo': 'doSomethingElse'
'click.c .foo': 'doAnotherThing', // you can choose any namespace as they are pretty much transparent.
},
doSomething: function() {
// ...
},
doSomethingElse: function() {
// ...
},
doAnotherThing: function() {
// ...
},
});
Solution 3
The events hash in your view is just a convenience "DSL" of sorts. Just bind your 2nd event manually inside initialize
.
events: {
'click .search-button': 'setModelTerm'
},
initialize: function () {
_.bindAll(this);
this.on('click .search-button', this.doAnotherThing);
}
Related videos on Youtube
Naor
My name is Naor and I live in the holy city Jerusalem of Israel. I am 31 years old, married to my lovely Ilana and we have a female cat named Mutzi. I am working as web developer and I create web apps in my free time.
Updated on May 16, 2020Comments
-
Naor about 4 years
I am using Backbone and I have a view with events defined:
.... events: { 'click .search-button': 'setModelTerm', 'change .source-select': 'setModelSourceId', 'change .source-select': 'activateSource' }, ....
I would like to trigger two methods when the event
change .source-select
fires. The problem is that the last entry in the event object overrides the preceding entry.
How can I trigger two methods in one event?
(I am trying to prevent writing another method that calls those two methods) -
Naor over 11 yearsI wrote it specifically! "I am trying to prevent writing another method that calls those two methods".
-
nikoshr over 11 years@Naor If you want to declare something like
'change .source-select': 'setModelSourceId activateSource'
, you'll have to override view.delegateEvents documentcloud.github.com/backbone/docs/… which seems slightly overkill to me -
Prasanna over 10 yearsIs there any way to to give a single function for multiple events?
-
nikoshr over 10 years@Prasanna You can pass the same target function multiple times, something like
events: {'event1': 'name_of_function', 'event2': 'name_of_function'}
assumingname_of_function
is defined on the prototype of your view -
Prasanna over 10 yearsthanks but i solved it this way events : {'click #btn1,#btn2,': 'function'}
-
Vic over 10 yearsI don't get why backbone allows multiple events one function and not multiple functions one event...
-
Kent Willis about 8 yearsThis is wrong. Using this.on binds to Backbone.Events mixin to the view not the DOM events. If you want to manually add DOM event callbacks, use:
this.$el.on('click', '.search-button', this.doAnotherThing);
which is what theevents
hash does behind the scenes. -
Kent Willis about 8 yearsAnd if you want them to be undelegated with the rest of the events on
undelegateEvents
, add this suffix to the event name:'click.delegateEvents' + this.cid
-
Peter Lyons about 8 years@KentWillis can you post an answer with the correct code please?
-
Kent Willis about 8 yearsFound a better way to solve this and posted it as an answer. But if you still want to manually add an event, do:
this.$el.on('click.delegateEvents' + this.cid, '.search-button', this.doAnotherThing);
in an override of thedelegateEvents
. Make sure to callBackbone.View.prototype.delegateEvents.call(this);
at the beginning of the override. This will let the view manage this custom DOM event callback alongside the other events. -
pixelearth over 7 yearsthis is life-changing
-
ionescho about 5 yearsthe unsung hero here