Handlebars

Handlebars

Source:

When rendering data from server using templates from frontend/express/views we are using ejs as templating engine. But when rendering templates on the browser side remotely loaded templates through ajax, we are using Handlebars templating engine. While in ejs everything is simple and your templating code is basically javascript code betwee <% %> tags. Then with Handlebars it is not that straightforward and we need helper functions to have some common templating logic

Members

(static) app-categories

Source:

Display common app category selecting UI element

Example
{{> app-categories }}

(static) appIdsToNames

Source:

Convert array of app ids to comma separate string of app names. Handlebar binding to CountlyHelpers.appIdsToNames

Example
<div class="apps">{{appIdsToNames appIds}}</div>

(static) date-selector

Source:

Display common date selecting UI elements

Example
{{> date-selector }}

(static) date-time-selector

Source:

Display common date time selecting UI elements

Example
{{> date-time-selector }}

(static) eachOfArray

Source:

Iterate through array, creating variable "index" for element index and variable "value" for value at that index

Example
{{#eachOfArray events}}
<div class="searchable event-container {{#if value.is_active}}active{{/if}}" data-key="{{value.key}}">
	<div class="name">{{value.name}}</div>
</div>
{{/eachOfArray}}

(static) eachOfObject

Source:

Iterate object with keys and values, creating variable "property" for object key and variable "value" for object value

Example
{{#eachOfObject app_types}}
  <div data-value="{{property}}" class="item">{{value}}</div>
{{/eachOfObject}}

(static) eachOfObjectValue

Source:

Iterate only values of object, this will reference the value of current object

Example
{{#eachOfObjectValue apps}}
<div class="app searchable">
	<div class="image" style="background-image: url('/appimages/{{this._id}}.png');"></div>
	<div class="name">{{this.name}}</div>
	<input class="app_id" type="hidden" value="{{this._id}}"/>
</div>
{{/eachOfObjectValue}}

(static) encodeURIComponent

Source:

Encode uri component

Example
<a href="/path/{{encodeURIComponent entity}}" </a>

(static) for

Source:

For loop in template providing start count, end count and increment

Example
{{#for start end 1}}
	{{#ifCond this "==" ../data.curPage}}
	<a href='#/manage/db/{{../../db}}/{{../../collection}}/page/{{this}}' class="current">{{this}}</a>
	{{else}}
	<a href='#/manage/db/{{../../db}}/{{../../collection}}/page/{{this}}'>{{this}}</a>
	{{/ifCond}}
{{/for}}

(static) formatTimeAgo

Source:

Format timestamp to twitter like time ago format, Handlebar binding to countlyCommon.formatTimeAgo

Example
<div class="time">{{{formatTimeAgo value.time}}</div>

(static) forNumberOfTimes

Source:

Loop for specified amount of times. Creating variable "count" as current index from 1 to provided value

Example
<ul>
{{#forNumberOfTimes 10}}
  <li>{{count}}</li>
{{/forNumberOfTimes}}
</ul>

(static) forNumberOfTimes

Source:

Loop for specified amount of times. with variable "need" & "now", loop time will be ${need} - ${now}

Example
<ul>
{{#forNumberOfTimes 10 3}}  // will loop 7 times
  <li>{{count}}</li>
{{/forNumberOfTimes}}
</ul>

(static) getFormattedNumber

Source:

Format float number up to 2 values after dot

Example
<div class="number">{{getFormattedNumber this.total}}</div>

(static) getIdValue

Source:

Get id value from ObjectID string

Example
<span>{{#clearObjectId value}}{{/clearObjectId}}</span>

(static) getShortNumber

Source:

Shorten number, Handlebar binding to countlyCommon.getShortNumber

Example
<span class="value">{{getShortNumber this.data.total}}</span>

(static) ifCond

Source:

If condition with different operators, accepting first value, operator and second value. Accepted operators are ==, !=, ===, <, <=, >, >=, &&, ||

Example
{{#ifCond this.data.trend "==" "u"}}
    <i class="material-icons">trending_up</i>
{{else}}
    <i class="material-icons">trending_down</i>
{{/ifCond}}

(static) limitString

Source:

Limit string length.

Example
<span>{{#limitString value 15}}{{/limitString}}</span>

(static) prettyJSON

Source:

Print out json in pretty indented way

Example
<td class="jh-value jh-object-value">{{prettyJSON value}}</td>

(static) replace

Source:

Replaces part of a string with a string.

Example
<span>{{#replace value "(" " ("}}{{/replace}}</span>

(static) timezones

Source:

Display common timezone selecting UI element

Example
{{> timezones }}

(static) toUpperCase

Source:

Convert text to upper case

Example
<div class="title">{{toUpperCase page-title}}</div>

(static) withItem

Source:

Get value form object by specific key, this will reference value of the object

Example
<p>{{#withItem ../apps key=app_id}}{{this}}{{/withItem}}</p>