Handlebars
- Description:
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
- Source:
Members
(static) app-categories
- Description:
Display common app category selecting UI element
- Source:
Display common app category selecting UI element
Example
{{> app-categories }}(static) appIdsToNames
- Description:
Convert array of app ids to comma separate string of app names. Handlebar binding to
CountlyHelpers.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
- Description:
Display common date selecting UI elements
- Source:
Display common date selecting UI elements
Example
{{> date-selector }}(static) date-time-selector
- Description:
Display common date time selecting UI elements
- Source:
Display common date time selecting UI elements
Example
{{> date-time-selector }}(static) eachOfArray
- Description:
Iterate through array, creating variable "index" for element index and variable "value" for value at that index
- 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
- Description:
Iterate object with keys and values, creating variable "property" for object key and variable "value" for object value
- 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
- Description:
Iterate only values of object, this will reference the value of current object
- 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
- Description:
Encode uri component
- Source:
Encode uri component
Example
<a href="/path/{{encodeURIComponent entity}}" </a>(static) for
- Description:
For loop in template providing start count, end count and increment
- 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) forNumberOfTimes
- Description:
Loop for specified amount of times. Creating variable "count" as current index from 1 to provided value
- 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
- Description:
Loop for specified amount of times. with variable "need" & "now", loop time will be ${need} - ${now}
- 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) formatTimeAgo
- Description:
Format timestamp to twitter like time ago format, Handlebar binding to
countlyCommon.formatTimeAgo
- Source:
Format timestamp to twitter like time ago format, Handlebar binding to countlyCommon.formatTimeAgo
Example
<div class="time">{{{formatTimeAgo value.time}}</div>(static) getFormattedNumber
- Description:
Format float number up to 2 values after dot
- Source:
Format float number up to 2 values after dot
Example
<div class="number">{{getFormattedNumber this.total}}</div>(static) getIdValue
- Description:
Get id value from ObjectID string
- Source:
Get id value from ObjectID string
Example
<span>{{#clearObjectId value}}{{/clearObjectId}}</span>(static) getShortNumber
- Description:
Shorten number, Handlebar binding to
countlyCommon.getShortNumber
- Source:
Shorten number, Handlebar binding to countlyCommon.getShortNumber
Example
<span class="value">{{getShortNumber this.data.total}}</span>(static) ifCond
- Description:
If condition with different operators, accepting first value, operator and second value. Accepted operators are ==, !=, ===, <, <=, >, >=, &&, ||
- 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
- Description:
Limit string length.
- Source:
Limit string length.
Example
<span>{{#limitString value 15}}{{/limitString}}</span>(static) prettyJSON
- Description:
Print out json in pretty indented way
- Source:
Print out json in pretty indented way
Example
<td class="jh-value jh-object-value">{{prettyJSON value}}</td>(static) replace
- Description:
Replaces part of a string with a string.
- Source:
Replaces part of a string with a string.
Example
<span>{{#replace value "(" " ("}}{{/replace}}</span>(static) round
- Description:
Round the number
- Source:
Round the number
Example
<span>{{round number limit}}</span>(static) timezones
- Description:
Display common timezone selecting UI element
- Source:
Display common timezone selecting UI element
Example
{{> timezones }}(static) toUpperCase
- Description:
Convert text to upper case
- Source:
Convert text to upper case
Example
<div class="title">{{toUpperCase page-title}}</div>(static) withItem
- Description:
Get value form object by specific key, this will reference value of the object
- 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>