No results found. Try again with different words?

Search must be at least 3 characters.

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.

Was this article helpful?


Did not find a solution? We are here to help you succeed.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

LET’S GET STARTED

Ready to Give It a Try?

Start Your Free 14-Day Trial Now. No Obligation. No Reason Not To.

Trial Icon

14 Days Free Trial

Experience Our Platform Risk-Free

Docs Icon

Documentation

Articles that cover common questions

24/7 World Class Support Team

Friendly Support

Reach Out – We’re Here to Help

Scroll to Top