Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

using an event aggregator with backbone

View 1-referencing.js
1 2 3 4 5 6 7 8 9 10
MedicationView = Backbone.View.extend({
events: {
"click #edit": "editMedication"
},
 
editMedication: function(){
var editView = new AddEditView({model: this.model});
editView.render();
}
});
View 1-referencing.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
MedicationView = Backbone.View.extend({
events: {
"click #edit": "editMedication"
},
 
initialize: function(options){
this.addEditView = options.addEditView;
}
 
editMedication: function(){
this.addEditView.render();
}
});
 
// initialize everything here...
// 'medicationList' is a collection of medications
var addEditView = new AddEditView(...);
 
medicationlist.each(function(med){
new MedicationView({model: med, addEditView: addEditView});
}
View 1-referencing.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
MedicationRouter = Backbone.Router.extend({
routes: {
"edit/:id": "editMedication"
},
 
editMedication: function(id){
var med = medicationList.get(id);
this.addEditView.editMedication(med);
}
});
 
AddEditView = Backbone.View.extend({
 
editMedication: function(medication){
this.model = medication;
this.render();
}
 
});
View 1-referencing.js
1
var vent = _.extend({}, Backbone.Events);
View 1-referencing.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
AddEditView = Backbone.View.extend({
initialize: function(options){
_.bindAll(this, "editMedication");
options.vent.bind("editMedication", this.editMedication);
},
 
editMedication: function(medication){
this.model = medication;
this.render();
}
});
 
MedicationView = Backbone.View.extend({
events: {
"click #edit": "editMedication"
},
 
initialize: function(options){
this.vent = options.vent;
},
 
editMedication: function(){
this.vent.trigger("editMedication", this.model);
}
});
 
// initialize everything, and tie it all together
// with the event aggregator object: vent
 
var vent = _.extend({}, Backbone.Events);
 
var addEditView = new AddEditView({vent: vent});
 
medicationList.each(function(med){
new MedicationView({model: med, vent: vent});
});
renoirb commented

I don’t want to troll around, maybe its only an example, but just in case.

Do you have more than one element with the id "edit"? Because JavaScript always consider ONE element, even though there are (possibly) more than one tag[id=edit]. If its the case, that's probably why you get some confusion on which event handler is called... and the clicked element that initiates the event.

Also, just in case you didn't see, on this snippet you forgot to close the each() and the to pass the this at the context argument. Maybe not that important if it isn’t in a controller, but this before the each and after might change if you don’t do it.

// medicationlist already defined...
var addEditView = new AddEditView(/* ... */);
medicationlist.each(function(med){
    new MedicationView({model: med, addEditView: addEditView});
}, this);

Besides that, i'm resuming reading your articles. Well done :)

Hi Derick,

In example 3, the router object references the add/edit view with "this".( I think I have also seen other examples in my readings where routers seem to have built in references to collections and views) How can it do that? Does the router have to be instantiated with a reference to the view or collection in options?
Thanks,
Justin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.