Extending Backbone Models, Views and Collections

You can extend SureFeedback’s models, views and collections via by extending SureFeedback’s objects. For instance, if you want to add new functions to a model, or add additional events to a view, you can hook into the initialize function on any view or model of your choice. 

Hooking Into Initialize And Ready Functions

Often times, we’ll want to hook into a view to add another subview. Maybe we want to add image metadata, or another type of subview when we load the main image view. First we hook into the initialize method for the image view:Websites:

ph.api.views.WebsitePage = ph.api.views.WebsitePage.extend({
     initialize: function () {
          this.constructor.__super__.initialize.apply(this, arguments);
          // add your code here
          console.log('constructed');
     },
     ready: function(){
          this.constructor.__super__.ready.apply(this, arguments);
          // add your code here
          console.log('dom is ready');
    }
});

Mockups:

Huddle.ImageView = Huddle.ImageView.extend({
     initialize: function () {
          this.constructor.__super__.initialize.apply(this, arguments);
          // add your code here
          console.log('constructed');
     },
     ready: function(){
          this.constructor.__super__.ready.apply(this, arguments);
          // add your code here
          console.log('dom is ready');
    }
});

Every view, model and collection can extend or overwrite any methods. In the above example, we’re going to run our own function when these views are initialized and another custom function when it’s ready in the dom.

Extending a view with our own functions

The best way to extend functionality of a view is to extend the view prototype. For instance, if we want to add our own function to the image view prototype, we can use underscore’s _.extend method:Websites:

/**
 * Extend the original image view
 * Here we can add our own functions, events, whatever we like.
 */
ph.api.views.WebsitePage = ph.api.views.WebsitePage.extend({
     initialize: function () {
          this.constructor.__super__.initialize.apply(this, arguments);
          this.prefixOurFunction();
     },
    // add a subview
    prefixOurFunction: function () {
        this.views.set( '.ph-annotation-dot-container', new prefix.OurNewView( {
            model: this.model
        } ) );
    }
});

Mockups:

/**
 * Extend the original image view
 * Here we can add our own functions, events, whatever we like.
 */
Huddle.ImageView.prototype = Huddle.ImageView.prototype.extend({
    initialize: function () {
          this.constructor.__super__.initialize.apply(this, arguments);
          this.prefixOurFunction();
     },
    // add a subview
    prefixOurFunction: function () {
        this.views.set( '.ph-annotation-dot-container', new prefix.OurNewView( {
            model: this.model
        } ) );
    }
});

When we extend the original prototype, we have access to the model, view and all the events that already exist on initialize. In the above example, we’re using the wp-backbone.js subviews manager to add a new subview to the image view. Note that we’re using a custom prefix to prevent against duplicate function names for any other methods that could be added to the view.

You can see from the above example, the views, models and collections used by SureFeedback are very pluggable – you can extend these however you like to integrate your own javascript into the mix.