Home handlebars.el.form

Handlebars form helper

{{{el-field name="foo"}}}

Content helper providing form inputs and controls for Handlebars using handlebars.el

Version

1.0.5

Installation

npm install handlebars.el.form

Registering the helper

 var Handlebars = require("handlebars");
 var FormHelper = require("handlebars.el.form");
 FormHelper.registerHelpers(Handlebars);

Using the helpers

See project website for more detailed examples

el-field

{{{el-field name="foo"}}}
    → «<div class="control control-foo"><label for="input-foo">Foo</label><div class="edit"><input id="input-foo" name="foo" type="text"></div></div>»

• Can render in edit or display mode
• Can output single and multiple inputs
• Take a Backbone-style model to provide value
• Take a key to provide labels, help and more

See el-field

el-text

{{{el-text name="foo"}}}
    → «<input name="foo" type="text">»

See el-text

el-checkbox

{{{el-checkbox name="foo"}}}
    → «<input name="foo" type="checkbox" value="true">»

See el-checkbox

el-radio

{{{el-radio name="foo"}}}
    → «<input name="foo" type="radio">»

See el-radio

el-password

{{{el-password name="foo"}}}
    → «<input name="foo" type="password">»

See el-password

el-file

{{{el-file name="foo"}}}
    → «<input name="foo" type="file">»

See el-file

el-hidden

{{{el-hidden name="foo"}}}
    → «<input name="foo" type="hidden"»

See el-hidden

el-submit

{{{el-submit}}}
    → «<input type="submit">»

See el-submit

el-textarea

{{{el-textarea name="foo"}}}
    → «<textarea name="foo"></textarea>»

See el-textarea

el-select

{{{el-select name="foo" options=opts}}}
Context {opts:["a", "b"]}
    → «<select name="foo"><option value="a">a</option><option value="b">b</option></select>»

See el-select

el-form

{{#el-form}}foo{{/el-form}}
    → «<form method="post">foo</form>»

See el-form

el-label

{{{el-label content="foo"}}}
    → «<label>foo</label>»

{{#el-label for="bar"}}foo{{/el-label}}
    → «<label for="bar">foo</label>»

See el-label

el-fieldset

{{#el-fieldset legend="bar"}}<i>foo</i>{{/el-fieldset}}
    → «<fieldset><legend><span>bar</span></legend><i>foo</i></fieldset>»

See el-fieldset

Tests

npm test

To see output generated by tests

npm run test:output