Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Handlebars.js helpers collection

branch: master
README.md

Handlebars.js-helpers-collection

Handlebars.js helpers collection

Overview

List helpers

Conditions

Value formatting helpers

Debugging and Logging

Managing Scope

Additional

see: https://github.com/danharper/Handlebars-Helpers/edit/master/README.md

override Key-Value

Description

Iterate over an object, setting 'key' and 'value' for each property in the object.

Usage

{{#key_value obj}} Key: {{key}} // Value: {{value}} {{/key_value}}

Handlebars.registerHelper("key_value", function(obj, fn) {
    var buffer = "",
        key;

    for (key in obj) {
        if (obj.hasOwnProperty(key)) {
            buffer += fn({key: key, value: obj[key]});
        }
    }

    return buffer;
});

by https://gist.github.com/strathmeyer

Each with Key

Description

Iterate over an object containing other objects. Each inner object will be used in turn, with an added key ("myKey") set to the value of the inner object's key in the container.

Usage

{{#each_with_key container key="myKey"}}...{{/each_with_key}}

Handlebars.registerHelper("each_with_key", function(obj, fn) {
    var context,
        buffer = "",
        key,
        keyName = fn.hash.key;

    for (key in obj) {
        if (obj.hasOwnProperty(key)) {
            context = obj[key];

            if (keyName) {
                context[keyName] = key;
            }

            buffer += fn(context);
        }
    }

    return buffer;
});

by https://gist.github.com/strathmeyer

First

Description:

return the first item of a list only

Usage:

{{#first items}}{{name}}{{/first}}

Handlebars.registerHelper('first', function(context, block) {
  return block(context[0]);
});

Iterate sliced

Description

Iterate over a specific portion of a list.

Usage:

{{#slice items offset="1" limit="5"}}{{name}}{{/slice}} : items 1 thru 6 {{#slice items limit="10"}}{{name}}{{/slice}} : items 0 thru 9 {{#slice items offset="3"}}{{name}}{{/slice}} : items 3 thru context.length defaults are offset=0, limit=5

Todo: combine parameters into single string like python or ruby slice ("start:length" or "start,length")
Handlebars.registerHelper('slice', function(context, block) {
  var ret = "",
      offset = parseInt(block.hash.offset) || 0,
      limit = parseInt(block.hash.limit) || 5,
      i = (offset < context.length) ? offset : 0,
      j = ((limit + offset) < context.length) ? (limit + offset) : context.length;

  for(i,j; i<j; i++) {
    ret += block(context[i]);
  }

  return ret;
});

Print comma separated list

Description

return a comma-serperated list from an iterable object

Usage:

{{#toSentance tags}}{{name}}{{/toSentance}}

Handlebars.registerHelper('toSentance', function(context, block) {
  var ret = "";
  for(var i=0, j=context.length; i<j; i++) {
    ret = ret + block.fn(context[i]);
    if (i<j-1) {
      ret = ret + ", ";
    };
  }
  return ret;
});

Format Date

Description

format an ISO date using Moment.js http://momentjs.com/

Usage:

moment(Date("2011-07-18T15:50:52")).format("MMMM YYYY") {{dateFormat creation_date format="MMMM YYYY"}}

Handlebars.registerHelper('dateFormat', function(context, block) {
  if (window.moment) {
    var f = block.hash.format || "MMM Do, YYYY";
    return moment(Date(context)).format(f);
  }else{
    return context;   //  moment plugin not available. return data as is.
  };
});

Debug Helper

Description
Usage

{{debug}} or {{debug someValue}}

Handlebars.registerHelper("debug", function(optionalValue) {
  console.log("\nCurrent Context");
  console.log("====================");
  console.log(this);

  if (arguments.length > 1) {
    console.log("Value");
    console.log("====================");
    console.log(optionalValue);
  }
});

from: @commondream (http://thinkvitamin.com/code/handlebars-js-part-3-tips-and-tricks/)

encode

Description

Runs a string through encodeURIComponent, returning the result. This is very useful when constructing URLs.

Usage:

{{uc page_id}}

Handlebars.registerHelper('uc', function (str) {
    return encodeURIComponent(str);
});
_isFunction = function(obj) {
    return !!(obj && obj.constructor && obj.call && obj.apply);
};

var head = function (arr, fn) {
    if (_isFunction(fn)) {
        // block helper
        return fn(arr[0]);
    }
    else {
        return arr[0];
    }
};

Handlebars.registerHelper('first', head);
Handlebars.registerHelper('head', head);

Handlebars.registerHelper('tail', function (arr, fn) {
    if (_isFunction(fn)) {
        // block helper
        var out = '';
        for (var i = 1, len = arr.length; i < len; i++) {
            out += fn(arr[i]);
        }
        return out;
    }
    else {
        return arr.slice(1);
    }
});

Include

Description

Includes another handlebars template loaded using the optional build-steps described above. This is similar to using a partial, but it supports nested directories and file extensions: Notice, I've used triple-mustaches to make sure the result of rendering that template isn't escaped. The current (not the root) context is used for rendering the included template. by caolan https://github.com/caolan

Usage:

{{{include "path/to/template.html"}}}

// TODO: add optional context argument?
Handlebars.registerHelper('include', function (name) {
    if (!exports.templates[name]) {
        throw new Error('Template Not Found: ' + name);
    }
    return exports.templates[name](this, {});
});

IfEqual

Description:

Block-helper that executes the inner-block if the two arguments test as strict equal (===). This also supports else blocks.

Usage:
    {{#ifequal current_page "home"}}
  • home
  • {{else}}
  • home
  • {{/ifequal}}
Handlebars.registerHelper('ifequal', function (val1, val2, fn, elseFn) {
    if (val1 === val2) {
        return fn();
    }
    else if (elseFn) {
        return elseFn();
    }
});

JOIN

Description

Handlebars "join" block helper that supports arrays of objects or strings. (implementation found here: https://github.com/wycats/handlebars.js/issues/133)

If "delimiter" is not speficified, then it defaults to ",". You can use "start", and "end" to do a "slice" of the array. Use with objects: {{#join people delimiter=" and "}}{{name}}, {{age}}{{/join}}

Use with arrays: {{join jobs delimiter=", " start="1" end="2"}}

Handlebars.registerHelper('join', function(items, block) {
    var delimiter = block.hash.delimiter || ",", 
        start = start = block.hash.start || 0, 
        len = items ? items.length : 0,
        end = block.hash.end || len,
        out = "";

        if(end > len) end = len;

    if ('function' === typeof block) {
        for (i = start; i < end; i++) {
            if (i > start) out += delimiter;
            if('string' === typeof items[i])
                out += items[i];
            else
                out += block(items[i]);
        }
        return out;
    } else { 
        return [].concat(items).slice(start, end).join(delimiter);
    }
});
Something went wrong with that request. Please try again.