Listening for Javscript Events
ProjectHuddle doesn't necessarily broadcast javascript events on a global level, but the awesome part about Backbone.js is you can listen for DOM or model events by extending views and models.
Model Events
Model events can be listened to using backbone's listenTo method. For example, when a model attribute changes, we can listen for the change and run our own functions on the event. Here's an example of extending a model and running our own function on the event.
Websites:
ph.api.views.CommentBubble = ph.api.views.CommentBubble.extend({ initialize: function () { // we're extending the original method this.constructor.__super__.initialize.apply(this, arguments); // output model to console console.log(this.model); // listen to models comments this.listenTo(this.model.get('comments'), 'add', this.prefixDoSomething); }, prefixDoSomething: function(updatedModel){ // log changed comments console.log(this.model.get('comments')); } });
Mockups:
Huddle.CommentView = Huddle.CommentView.extend({ initialize: function () { // we're extending the original method this.constructor.__super__.initialize.apply(this, arguments); // output model to console console.log(this.model); // listen to models comments this.listenTo(this.model.items, 'add', this.prefixDoSomething); }, prefixDoSomething: function(updatedModel){ // log changed comments console.log(this.model.items); } });
View Events
View events can be listened to by extending backbone's events hash. For example, when a something is clicked on a particular view or subview, we can extend the events hash to run our own functions on the event.
It's recommended that you use Backbone events hash instead of javascript or jquery events. This is because they are pre-scoped and will automatically remove themselves when the view is removed, ensuring no memory leaks and other performance issues!
Here's an example of extending the events hash and running our own function on the event.
Websites
ph.api.views.Comment = ph.api.views.Comment.extend({ // Add new events events: function () { // we're extending the original events here with our own return _.extend({}, this.constructor.__super__.events, { 'hover .ph-annotation-dot': 'prefixDoSomething' }); }, // add our own method prefixDoSomething: function () { console.log('hovered!'); } });
Mockups
Huddle.ImageView = Huddle.ImageView.extend({ // Add new events events: function () { // we're extending the original events here with our own return _.extend({}, this.constructor.__super__.events, { 'hover img.ph-project-image': 'prefixDoSomething' }); }, // add our own method prefixDoSomething: function () { console.log('hovered!'); } });