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. 

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!');
	}
});