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)
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);
}
},
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() {
// ...
},
});
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
I've been thrown into a Backbone code base and one of the modifications I need to make requires duplicating a text element with typeahead. Rather than copy and paste code, I'd like to re-use the event code but as I know hardly anything about Backbone I'm not sure how this should be done. Should it be a helper? If so, where do I put the helper code so it can be used by both views? I'd rather not attempt view inheritance if at all possible because I'd like to keep the changes as simple and minimal as possible.
events: {
// all other events removed for conciseness.
'typeahead:selected #ud_producerid': 'producerChanged'
}
I need the same event with the identical functionality in the producerChanged function as well as the setupBindings code that wires up the typeahead to work in 2 different views.
I know you said you didn't want to use inheritance here but it is easy in Backbone and well suited to the task.
var TypeaheadBase = Backbone.View.extend({
events: {
'typeahead:selected #ud_producerid': 'producerChanged'
},
producerChanged: function(e) {
...
},
anotherBaseMethod: function() {
...
}
});
var TypeaheadBaseA = TypeaheadBase.extend({
someOtherAMethod: function() {
...
},
// You can do some extra functionality on `producerChanged`.
// (Or you can override by not calling the Base prototype).
producerChanged: function() {
TypeaheadBase.prototype.producerChanged.apply(this, arguments);
// Do some additional stuff.
}
});
var TypeaheadBaseB = TypeaheadBase.extend({
// You can also extend things like events, which could be a hash (Object).
events: function() {
var parentEvents = _.result(TypeaheadBase.prototype, 'events');
return _.extend({}, parentEvents, {
'click a': 'someClickEvent'
});
},
someClickEvent: function() {
...
}
});
i want to call a method from view#1 which is already implemented in different view (view#2)..
how to achieve this in a nice n simple way.. using backbonejs.
App.Views.view1 = Backbone.View.extend({
events: {
'click .someclass1' : 'custom_method_1',
},
custom_method_1:function(e){
//now this method calls another method which is implemented in different view
custom_method_2();
},
});
App.Views.view2 = Backbone.View.extend({
events: {
'click .someclass2' : 'custom_method_2',
},
//// this method needs to be called from view1 also
custom_method_2:function(e){
},
});
If you search how to use the eventbus, you can do it like this:
// you can name the event 'custom_method_2' as you want
Backbone.Events.on('custom_method_2', App.Views.view2.custom_method_2);
Now you are listening to the event custom_method_2 on the Object Backbone.Events that you can consider as your eventsbus.
Then in view1:
custom_method_1:function(e){
//now this method calls another method which is implemented in different view
// custom_method_2();
Backbone.Events.trigger('custom_method_2', e);
},
I am facing a problem while trying to click submit after re-render.
This is my view:
ShareHolderInfoView = Backbone.View.extend( {
template : 'shareholderinfo',
initialize: function() {
this.model = new ShareHolderInfoModel();
},
render : function() {
$.get("shareholderinfo.html", function(template) {
var html = $(template);
that.$el.html(html);
});
//context.loadViews.call(this);
return this;
},
events:{
"change input":"inputChanged",
"change select":"selectionChanged",
"click input[type=submit]":"showModel"
},
inputChanged:function(event){
var field = $(event.currentTarget);
var data ={};
data[field.attr('id')] = field.val();
this.model.set(data);
},
showModel:function(){
console.log(this.model.attributes);
alert(JSON.stringify(this.model.toJSON()));
}
});
This is my Router
var shareholderInfo, accountOwnerInfo;
App.Router = Backbone.Router.extend({
routes:{
'share':'share',
'joint':'joint'
},
share:function(){
$("#subSection").empty();
if(!shareholderInfo){
shareholderInfo = new ShareHolderInfoView();
$("#subSection").append(shareholderInfo.render().el);
} else{
$("#subSection").append(shareholderInfo.$el);
}
},
joint:function(random){
$("#subSection").empty();
if(!accountOwnerInfo){
accountOwnerInfo = new AccountOwnerInfoView();
$("#subSection").append(accountOwnerInfo.render().el);
} else{
$("#subSection").append(accountOwnerInfo.$el);
}
}
});
This is my HTML a div with id='subSection'.
if I check in console, I can able to see the events bound to that view.
Object {change input: "inputChanged", change select: "selectionChanged", click input[type=submit]: "showModel"}
But its not calling that showModel function afer i click submit. Please help.
Your fundamental problem is that you're improperly reusing views.
From the fine manual:
.empty()
Description: Remove all child nodes of the set of matched elements from the DOM.
[...]
To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves.
So when you say:
$("#subSection").empty();
you're not just clearing out the contents of #subSection, you're also removing all event handlers attached to anything inside #subSection. In particular, you'll remove any event handlers bound to accountOwnerInfo.el or shareholderInfo.el (depending on which one is already inside #subSection).
Reusing views is usually more trouble than it is worth, your views should be lightweight enough that you can destroy and recreate them as needed. The proper way to destroy a view is to call remove on it. You could rewrite your router to look more like this:
App.Router = Backbone.Router.extend({
routes: {
'share':'share',
'joint':'joint'
},
share: function() {
this._setView(ShareHolderInfoView);
},
joint: function(random){
this._setView(AccountOwnerInfoView);
},
_setView: function(view) {
if(this.currentView)
this.currentView.remove();
this.currentView = new view();
$('#subSection').append(this.currentView.render().el);
}
});
If your views need any extra cleanup then you can override remove on them to clean up the extras and then chain to Backbone.View.prototype.remove.call(this) to call the default remove.
If for some reason you need to keep your views around, you could call delegateEvents on them:
delegateEvents delegateEvents([events])
Uses jQuery's on function to provide declarative callbacks for DOM events within a view. If an events hash is not passed directly, uses this.events as the source.
and you'd say things like:
$("#subSection").append(shareholderInfo.$el);
shareholderInfo.delegateEvents();
instead of just:
$("#subSection").append(shareholderInfo.$el);
I'd strongly recommend that you treat your views and cheap ephemeral objects: destroy them to remove them from the page, create new ones when they need to go on the page.
I've got a view which contains several textarea components. The question is how to unbind 'click' event from the textarea that was clicked? Only from the particular one.
var StreamView = Backbone.View.extend({
el: "#stream",
events: {
"click textarea" : "addSendCommentButton"
},
addSendCommentButton : function(event) {
this.undelegateEvents();
}
});
If you want to unbind only a specific event you can use something like this:
addSendCommentButton : function(event) {
this.$el.off('click.delegateEvents' + this.cid, 'textarea');
}
Backbone attach the events using the jQuery on with a specific namespace delegateEvents plus the cid.
I am afraid that this also unbinds the events from other textareas. This is so because the off method needs the same selector that the passed to on as the jQuery documentation says:
To remove specific delegated event handlers, provide a selector
argument. The selector string must exactly match the one passed to
.on() when the event handler was attached.
Suggestion
You can have a similar behaviour changing a little your code:
var StreamView = Backbone.View.extend({
el: "#stream",
events: {
"click textarea.unfinished" : "addSendCommentButton"
},
addSendCommentButton : function(event) {
$(event.target).removeClass("unfinished");
}
});
Use a more specific selector to attach the event and remove that class when the callback is called.
YD1m answer is correct but I want to share with you another way how to do this.
If you want implement one-time event you can use one jQuery method.
You can do this in two ways:
By overriding delegateEvents method
By attaching event after rendering - this.$('textarea').one('click', _.bind(this. addSendCommentButton, this))
Check this:
var StreamView = Backbone.View.extend({
el: "#stream",
events: {
"click textarea" : "addSendCommentButton"
},
addSendCommentButton : function(e) {
e.target.removeEventListener('click', 'addSendCommentButton');
}
});
Inside my Backbone views, in the initialize function I do stuff like:
initialize: function () {
$(this.el).on('click', '.button', function () {
$(this).fadeTo(0.5);
}
}
This seems to go against Backbone's convention of using events. Rewriting with the events hash:
events: { 'click .button': 'fadeButton' },
fadeButton: function () {
$(this).fadeTo(0.5);
}
The problem is inside fadeButton's scope the value of this is not the same as when using .on(). What is the correct way of doing this using the events hash?
Like paul said, Backbone automatically sets the context for event callbacks to the view itself. So this in the callback will be the view instance.
So you can get the effect you intend by using the view's scoped selector function...
events: {
'click .button': 'fadeButton'
},
fadeButton: function () {
this.$('.button').fadeTo(0.5);
}
... but if you've got multiple elements with class "button" in your view, that'll fade all of them, in which case you can always use the event object that jQuery gives you to get the event target:
fadeButton: function (event) {
$(event.target).fadeTo(0.5);
}
You defined the events hash correctly.
And for every event handler defined, Backbone automatically sets the context to the view. So this within fadeButton is the view, and you will want to access the view's element.
The code below shows how you need to update the fadeButton function.
fadeButton: function () {
$(this.el).fadeTo(0.5);
}