Page Comparison

...

The widget life cycle is split into a number of stages in order:

1. Initialization
   1. External module management
   2. Data prefetching
2. 153092153Data loading153092153
3. Rendering
4. Interaction
5. 153092153Destruction

The methods and properties are all documented in their respective stage.

...

This method is called after the class has been initialized. It is a good place to set up preloading , event listeners, etc.

...

afterInitialize: function () {
    this.updateTime();
},

External module management

...

This method is called after the setup phase happens. This is a useful place to attach events to the collection, as it's initialised here (but not yet loaded).

...

afterSetup: function () {
    this.collection.on('add', this.itemAdded, this);
},

collection

widget.collection

A Backbone.js collection as instantiated by the base widget. This contains all the data that the widget needs for rendering. It is fetched before the rendering stage.

afterRender: function () {
    console.log(this.collection.length);
},

dashboard

widget.dashboard

A Backbone.js model that represents the currently rendered dashboard. See dashboard store for the main usage of this model.

...

• additionalQuery - specifies custom query part that will be added to the current dashboard query to produce the widget's query.
  • Allows presenting different datasets in different widgets
  • Note, produces more requests. Always take care to ensure the overall performance is not affected.
• createdBefore - specifies an upper time restriction for the widget's collection fetch.
  • Supports both absolute (ISO format) dates and relative strings, e.g. '24h', '3months'
• createdAfter - like createdBefore, but for lower time restriction
  

...

getCustomCollectionParams: function () {
	return {
		additionalQuery: 'Company:Squirro',
		createdBefore: '24h',
		createdAfter: '2011-01-01T00:00:00',
	};
},

Rendering

In this stage the widget content is rendered into its container. The container is managed by the Squirro Dashboard automatically. So after this stage the widget is fully in the page's DOM tree and displayed to the user.

...

This method is called after the rendering has been done (after renderContent). When this is executed, the widget is guaranteed to have injected itself into the DOM, and thus normal techniques of manipulating DOM elements apply (jQuery can be used for example).

The default implementation of afterRender appends the custom template to the widget and also installs any custom events (see 153092153 customEvents).

...

afterRender: function () {
    this.$el.append(this.customTemplate());
},

customEl

widget.customEl    

A special property of the widget that defines the element into which the custom template is rendered. This is a CSS selector that is executed against the root node of the current widget.

...

customEl: '.widget-content',

customTemplate()

widget.customTemplate(/* no arguments */)

Renders the custom template and returns the resulting HTML code. The default behavior of this method is to call the customWidgetTemplate function with the return value of getCustomTemplateParams method.

customWidgetTemplate()

...

Returns a hash of all the parameters that are passed into the custom template. The return value of this method is used as input for the customWidgetTemplate call.

customResources

widget.customResources['myTemplate.html'](parameters)

...

In that case rendering can be fully customized and overwritten in the afterRender method.

Interaction

Squirro Widgets provide interaction by subscribing events to its DOM elements and handling them. All of these events fall into the interaction stage.

The recommended way to install custom events is 153092153 customEvents. To add the event handlers manually, for example by using jQuery listeners directly, attach them in the afterRender method.

customEvents

widget.customEvents    

The customEvents hash can be used to specify a set of DOM events that will be listened for and delegated to methods in the widget view. This is an extension to the default events hash of Backbone.js and behaves very similarly.

...

This is an example that extends the facets table with an additional click handler.

See dashboard store for information on the store property being used here.

return Widgets.FacetsTable.extend({
    customEvents: {
        'click tr': 'onRowClicked',
    },
 
    onRowClicked: function () {
        this.dashboard.store.set({'additionalInfo': true});
    },
});

onStoreChange()

widget.onStoreChange(model, options)    

Called when a store variable changes (see 153092153 Dashboard Store).

The model argument can be used to access the exact property or properties that have changed by accessing model.changed. That property is a hash containing all the attributes that changed in the last set call.

...

This method is called when the widget is being removed from the document. It is a good place to clean up, such as removing event listeners.

...

afterClose: function () {
    this.cancelTimer();
},