sparkartgroup / handlebars-helper Goto Github PK

The equal helper is basically the same as #if except it allows you to check for things other than truthiness. Comparisons are made with ==.

count

5

Handlebars

<!-- Equal with value argument: 5 -->
{{#equal count 5}}There are five{{/equal}}
<!-- Equal with value argument: 22 -->
{{#equal count 22}}There are twenty two{{/equal}}

Output

<!-- Equal with value argument: 5 -->
There are five
<!-- Equal with value argument: 22 -->

A helper for formatting time strings. Ideally for converting things like 233 to 5:53.

Inserting machine readable datetimes is sometimes needed in templates, i.e. for the <time> element's datetime attribute and similar microdata. This can also be useful when scripting. The format of course should be consistent, and ISO8601 is the best choice.

It'd be handy to have a preset for using this format rather than having to specify it by hand, i.e.

{{ formatDate date 'iso8601' }}

vs.

{{ formatDate date '%Y-%m-%dT%H:%M:%S%z' }}

The where helper should create a block that contains all of the items in an array that have a matching key/value. An optional limit can be provided that limits how many items are retrieved. A negative limit will traverse the array in reverse.

cats array

[{
    "name": "Wesley",
    "age": 8
},{
    "name": "Twizzler",
    "age": 8
},{
    "name": "Chip"
    "age": 1
}]

Handlebars

<!-- where with minimum arguments: cats age 1 -->
<ul>{{#where cats age 1}}<li>{{name}}</li>{{/where}}</ul>
<!-- where with limit: cats age 8 1 -->
<ul>{{#where cats age 8 1}}<li>{{name}}</li>{{/where}}</ul>
<!-- where with negative limit: cats age 8 -1 -->
<ul>{{#where cats age 8 -1}}<li>{{name}}</li>{{/where}}</ul>

Output

<!-- where with minimum arguments: cats age 1 -->
<ul>
    <li>Chip</li>
</ul>
<!-- where with limit: cats age 8 1 -->
<ul>
    <li>Wesley</li>
</ul>
<!-- where with negative limit: cats age 8 -1 -->
<ul>
    <li>Twizzler</li>
</ul>

Right now many helpers will completely break template rendering if they don't get data of the correct type. Ideally this should just return nothing (from the helper), rather than destroy the whole page render.

Needs to work with CommonJS for node.js, but it would also be lovely to use this via Browserify.

new Date(1387308168)
Fri Jan 16 1970 17:21:48 GMT-0800 (PST)
new Date('1387308168')
Invalid Date

...is likely the culprit.

We could probably use a helper to provide access to variables that are out of the current scope. Since we usually need to just access something at the top of the current context, a simple global helper would do the trick.

<img src="{{global "url.host"}}/images/banners/approach.jpg" />

Inspired by this SO issue: http://stackoverflow.com/questions/18856023/handlebars-js-global-contexts

We need a helper for traversing sections of arrays. Something like this:

cats array

["Wesley","Twizzler","Pixel","Chip","Milk"]

Handlebars

<!-- Range with only an end argument to 1-->
<ul>{{#range cats 1}}<li>{{this}}</li>{{/range}}</ul>
<!-- Range with a start and end argument 0 to 2 -->
<ul>{{#range cats 0 3}}<li>{{this}}</li>{{/range}}</ul>
<!-- Range with a negative start argument -3 to end -->
<ul>{{#range cats -3}}<li>{{this}}</li>{{/range}}</ul>
<!-- Range with a negative start and end argument -3 to -2 -->
<ul>{{#range cats -3 -2}}<li>{{this}}</li>{{/range}}</ul>

Output

<!-- Range with only an end argument to 1-->
<ul>
    <li>Wesley</li>
</ul>
<!-- Range with a start and end argument 0 to 2 -->
<ul>
    <li>Wesley</li>
    <li>Twizzler</li>
    <li>Pixel</li>
</ul>
<!-- Range with a negative start argument -3 to end-->
<ul>
    <li>Pixel</li>
    <li>Chip</li>
    <li>Milk</li>
</ul>
<!-- Range with a negative start and end argument -3 to -2 -->
<ul>
    <li>Pixel</li>
    <li>Chip</li>
</ul>

If the number of items in the collection passed to first or last is less than the count parameter, the helper will render nothing.

The number helper should provide a set of tools for turning a number into a string representation of the number. Numbers like 1000 can be converted to formats like: 1,000, one thousand, 1k, or 1,000.00.

dollars

1000

Handlebars

<!-- Number with no arguments -->
${{#number dollars}}
<!-- Number with format argument: quantity -->
${{#number dollars quantity}}
<!-- Number with format argument: word -->
{{#number dollars word}} dollars
<!-- Number with format argument: short -->
${{#number dollars short}}
<!-- Number with format and decimal arguments -->
${{#number dollars quantity 2}}

Output

<!-- Number with no arguments -->
$1,000
<!-- Number with format argument: quantity -->
$1,000
<!-- Number with format argument: word -->
one thousand dollars
<!-- Number with format argument: short -->
$1k
<!-- Number with format and decimal arguments -->
$1,000.00

How to get index inside between?

I'm pretty sure the problems seen in these tests are caused by time zone issues: https://ci.testling.com/SparkartGroupInc/handlebars-helper

What's likely happening is that the helper is being fed a datetime from a certain time zone (like PST), but returns the string based on a different one (like EST). Maybe the formatDate helper needs some way to pass the desired time zone/offset.

The replace helper should provide basic string replacement functionality. Users should be able to provide a string to replace and a replacement.

url

http://sparkart.com/images/cats.jpg

Handlebars

<!-- Replace helper with arguments: sparkart.com cdn.sparkart.com -->
<img src="{{#replace url sparkart.com cdn.sparkart.com}}" />

Output

<!-- Replace helper with arguments: sparkart.com cdn.sparkart.com -->
<img src="http://cdn.sparkart.com/images/cats.jpg" />

This should have full RequireJS support, as we're using it for our front end needs.

The encode helper allows you to encode a string. At first, this will just cover URI encoding.

link

"http://sparkart.com"

Handlebars

<!-- Encode helper with type argument: uri -->
<a href="http://google.com/search?q={{#encode link uri}}">Search for Sparkart</a>

Output

<!-- Encode helper with type argument: uri -->
<a href="http://google.com/search?q=http%3A%2F%2Fsparkart.com">Search for Sparkart</a>

Look over Assemble's Handlebars helpers and Swag for useful helpers. Carry over useful helpers and modify them as needed. Worry about documentation and organization later.

Hey, thanks for these helpers :)

For easier consumption, I would suggest re-organizing the helpers to follow this kind of pattern: https://github.com/solarmosaic/handlebars-helpers

As-is, requiring individual helpers is overly redundant:

var helpers = require("handlebars-helper").helpers;

And this would be cleaner:

var helpers = require("handlebars-helper");