countlyView

countlyView

Source:

Default Backbone View template from which all countly views should inherit. A countly view is defined as a page corresponding to a url fragment such as #/manage/apps. This interface defines common functions or properties the view object has. A view may override any function or property.

Example

Extending default view and overwriting its methods

 window.DashboardView = countlyView.extend({
      renderCommon:function () {
          if(countlyGlobal["apps"][countlyCommon.ACTIVE_APP_ID]){
              var type = countlyGlobal["apps"][countlyCommon.ACTIVE_APP_ID].type;
              type = jQuery.i18n.map["management-applications.types."+type] || type;
              $(this.el).html("<div id='no-app-type'><h1>"+jQuery.i18n.map["common.missing-type"]+": "+type+"</h1></div>");
          }
          else{
              $(this.el).html("<div id='no-app-type'><h1>"+jQuery.i18n.map["management-applications.no-app-warning"]+"</h1></div>");
          }
      }
  });

Members

el :jquery_object

Source:

Main container which contents to replace by compiled template

Type:
  • jquery_object

isLoaded :boolean

Source:

Checking state of view, if it is loaded

Type:
  • boolean

template :object

Source:

Handlebar template

Type:
  • object

templateData :object

Source:

Data to pass to Handlebar template when building it

Type:
  • object

Methods

afterRender()

Source:

This method is called after calling render method

appChanged(callbackopt)

Source:

This method is called when app is changed, default behavior is to reset preloaded data as events

Parameters:
Name Type Attributes Description
callback function <optional>

callback function

beforeRender() → {boolean}

Source:

This method is called before calling render, load your data and remote template if needed here

Example
beforeRender: function() {
  var self = this;
  return $.when(T.render('/density/templates/density.html', function(src){
      self.template = src;
  }), countlyDeviceDetails.initialize(), countlyTotalUsers.initialize("densities"), countlyDensity.initialize()).then(function () {});
}
Returns:

true

Type
boolean

dateChanged()

Source:

This method is called when date is changed, default behavior is to call refresh method of the view

destroy()

Source:

This method is called when view is destroyed (user entered inactive state or switched to other view) you can clean up here if there is anything to be cleaned

initialize()

Source:

Initialize view, overwrite it with at least empty function if you are using some custom remote template

refresh() → {boolean}

Source:

Called when view is refreshed, you can reload data here or call countlyView.renderCommon with parameter true for code reusability

Example
refresh:function () {
   var self = this;
   //reload data from beforeRender method
   $.when(this.beforeRender()).then(function () {
       if (app.activeView != self) {
           return false;
       }
       //re render data again
       self.renderCommon(true);

       //replace some parts manually from templateData
       var newPage = $("<div>" + self.template(self.templateData) + "</div>");
       $(self.el).find(".widget-content").replaceWith(newPage.find(".widget-content"));
       $(self.el).find(".dashboard-summary").replaceWith(newPage.find(".dashboard-summary"));
       $(self.el).find(".density-widget").replaceWith(newPage.find(".density-widget"));
   });
}
Returns:

true

Type
boolean

render() → {object}

Source:

Main render method, better not to over write it, but use countlyView.renderCommon instead

Returns:

this

Type
object

renderCommon(isRefresh)

Source:

Do all your rendering in this method

Example
renderCommon:function (isRefresh) {
   //set initial data for template
   this.templateData = {
       "page-title":jQuery.i18n.map["density.title"],
       "logo-class":"densities",
       "chartHTML": chartHTML,
   };

   if (!isRefresh) {
       //populate template with data and add to html
       $(this.el).html(this.template(this.templateData));
   }
}
Parameters:
Name Type Description
isRefresh boolean

render is called from refresh method, so do not need to do initialization

restart()

Source:

This method is called when user is active after idle period