A library of Handlebars helpers for generating HTML, inspired by ActionView helpers
Add the grips.js file to your webpage. Be sure to add Handlebars first.
Use any of the following Handlebars expressions inside your Handlebars templates.
{{{ helperName requiredFields attributes }}}You will need to use the 'triple-stash' ({{{ expression }}}) rather than the
double-stash ({{ expression }}).
Attributes can be passed to the helper as follows:
{{{linkTo 'Home' '/' class='link' id='link-home' }}}
//=> <a class='link' id='link-home' href='/'>Home</a>Element attributes can have values be inserted during the templating process. Paramater values are taken from the current context (the object passed to the template compiler).
For example, if an element is given class='item-:id', the :id in the string will be replaced with the context's id property.
//context: {name: 'YSavir', id: 1, memberType: 'premium'}
{{{ linkTo name 'users/:id' class=':memberType-member' }}}
//=> <a href='/users/1' class="premium-member">YSavir</a>Inserts an anchor tag in place of the expression.
{{{linkTo body path [attributes]}}}The path string can accept parameters.
// Context: {name: 'YSavir', id: 1}
{{{linkTo 'Home' '/'}}}
//=> <a href='/'>Home</a>
{{{linkTo 'Home' '/' class='link' id='link-home' }}}
//=> <a class='link' id='link-home' href='/'>Home</a>
{{{linkTo name 'users/:id' }}}
//=> <a href='/users/1'>YSavir</a>Inserts a text input tag.
//context {username: 'Joe'}
{{{ textFieldTag }}}
//=> <input type="text">
{{{ textFieldTag name='someInput' autocomplete='on' }}}
//=> <input type="text" name="someInput" autocomplete="on">
{{{ textFieldTag value=":username" placeholder="Username... Currently :username" }}}
//=> <input type="text" value="Joe" placeholder="Username... Currently Joe">Inserts a text area tag.
//context {username: YSavir}
{{{ textArea }}}
//=> <textarea></textarea>
{{{ textArea name="a-text-area" id=":username's-story" }}}
//=> <textarea name="a-text-area" id="YSavir's-story }}}
{{{ textArea placeholder="Enter story here" value="story of :username" }}}
//=> <textarea placeholder="Enter story here">story of YSavir</textarea>Insterts an email input tag.
//context {email: 'testemail@example.com'}
{{{ emailTag }}}
//=> <input type="email">
{{{ emailTag name="testEmail" id="test-email-id" }}}
//=> <input type="email" id="test-email-id" name="testEmail">
{{{ emailTag value=":email" }}}
//=> <input type="email" value="testemail@example.com">hiddenTag
Inserts a hidden input tag.
// context {type: 'premium'}
{{{ hiddenTag }}}
//=> <input type="hidden">
{{{ hiddenTag name="username" }}}
//=> <input type="hidden" name="username">
{{{ hiddenTag value=":type" }}}
//=> <input type="hidden" value="premium">Grips is compatibile with:
- Chrome
- Firefox (1.5+)
- IE (9+)
- Safari (5+)
- Opera (11+)
- Pisces
- Taurus
- Capricorn (6+)
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request