countlyView

Namespace

countlyView

Description:

  • 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.

Source:
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

Description:

  • Main container which contents to replace by compiled template

Source:

Main container which contents to replace by compiled template

Type:
  • jquery_object

isLoaded :boolean

Description:

  • Checking state of view, if it is loaded

Source:

Checking state of view, if it is loaded

Type:
  • boolean

template :object

Description:

  • Handlebar template

Source:

Handlebar template

Type:
  • object

templateData :object

Description:

  • Data to pass to Handlebar template when building it

Source:

Data to pass to Handlebar template when building it

Type:
  • object

Methods

afterRender()

Description:

  • This method is called after calling render method

Source:

appChanged(callbackopt)

Description:

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

Source:
Parameters:
Name Type Attributes Description
callback function <optional>

callback function

beforeRender() → {boolean}

Description:

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

Source:
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()

Description:

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

Source:

destroy()

Description:

  • 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

Source:

initialize()

Description:

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

Source:

refresh() → {boolean}

Description:

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

Source:
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}

Description:

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

Source:
Returns:

this

Type
object

renderCommon(isRefresh)

Description:

  • Do all your rendering in this method

Source:
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()

Description:

  • This method is called when user is active after idle period

Source: