Template helper el-field

handlebars.el.form

Outputs a field control

{{{el-field name=name}}}
{{{el-field name=name type=type}}}
{{{el-field name=name input=input}}}
{{{el-field name=name inputs=inputs}}}
{{{el-field name=name model=model}}}
{{{el-field name=name
            introduction=introduction
            description=description
            help=help
            error=error
            extra=extra}}}
{{#el-field name=name}}...{{/el-field}}

Generates a field element wrapped around any specified blocks

Examples

{{{el-field name="bar"}}}
→  <div class="control control-bar">
     <label for="input-bar">Bar</label>
     <div class="edit">
       <input id="input-bar" name="bar" type="text">
     </div>
   </div>

el-field can capture content

{{#el-field name="bar"}}{{{el-text name="foo"}}}{{/el-field}}
→  <div class="control control-bar">
     <input name="foo" type="text">
   </div>

Edit and display modes

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

{{{el-field name="foo" value="bar" display=true}}}
→  <div class="control control-foo">
     <h3>Foo</h3>
     <div class="display">
       <p>bar</p>
     </div>
   </div>

{{{el-field name="foo" value="bar" edit=false}}}
→  <div class="control control-foo">
     <h3>Foo</h3>
     <div class="display">
       <p>bar</p>
     </div>
   </div>

Pass additional class on the field wrapper

{{{el-field name="bar" class="foo" value="myvalue"}}}
→  <div class="control control-bar foo">
     <label for="input-bar">Bar</label>
     <div class="edit">
       <input id="input-bar" name="bar" type="text" value="myvalue">
     </div>
   </div>

Pass options to a select field

{{{el-field name="bar" type="select" options=opts}}}
Context {opts: ["foo", "bar"]}
→  <div class="control control-bar">
     <label for="input-bar">Bar</label>
     <div class="edit">
       <select id="input-bar" name="bar">
         <option value="foo">foo</option>
         <option value="bar">bar</option>
       </select>
     </div>
   </div>

Pass a label

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

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

Passing mutltiple inputs - checkboxes

{{{el-field name="bar" legend="Foo" inputs=inputs checked="b"}}}
Context {inputs:["a", "b", "c"]}
→  <div aria-labelledby="control-group-bar-label" class="control control-bar" role="group">
     <p id="control-group-bar-label">Foo</p>
     <div class="edit">
       <input id="bar-0" name="bar" type="radio" value="a">
       <label for="bar-0">a</label>
     </div>
     <div class="edit">
       <input checked id="bar-1" name="bar" type="radio" value="b">
       <label for="bar-1">b</label>
     </div>
     <div class="edit">
       <input id="bar-2" name="bar" type="radio" value="c">
       <label for="bar-2">c</label>
     </div>
   </div>

{{{el-field name="bar" legend="Foo" type="checkbox" inputs=inputs checked="b"}}}
Context {inputs:["a", "b", "c"]
→  <div aria-labelledby="control-group-bar-label" class="control control-bar" role="group">
     <p id="control-group-bar-label">Foo</p>
     <div class="edit">
       <input id="bar-0" name="bar" type="checkbox" value="a">
       <label for="bar-0">a</label>
     </div>
     <div class="edit">
       <input checked id="bar-1" name="bar" type="checkbox" value="b">
       <label for="bar-1">b</label>
     </div>
     <div class="edit">
       <input id="bar-2" name="bar" type="checkbox" value="c">
       <label for="bar-2">c</label>
     </div>
   </div>

Passing a lookup key

{{{el-field name="bar" phrase-key="foo.bar"}}}
→  <div class="control control-bar">
     <div class="control-introduction">
       <p>Bar introduction</p>
     </div>
     <label for="input-bar">Bar label</label>
     <div class="control-description">
       <p>Bar description</p>
      </div>
      <div class="control-help">
        <p>Bar help</p>
      </div>
      <div class="edit">
        <input id="input-bar" name="bar" type="text">
      </div>
      <div class="control-extra">
        <p>Bar extra line 1</p>
        <p>Bar extra line 2</p>
      </div>
    </div>

Passing errors

{{{el-field name="bar" error=error}}}
Context {error:["Error A", "Error B"]}
→  <div class="control control-bar">
     <label for="input-bar">Bar</label>
     <div class="edit">
       <input id="input-bar" name="bar" type="text">
     </div>
   <div class="control-error">
     <h2>There are 2 problems with the "bar" field</h2>
     <ul>
       <li>Error A</li>
       <li>Error B</li>
     </ul>
   </div>
 </div>

Using models with el-field

{{{el-field model=model name="baz"}}}
Context {model:fooModel}
→  <div class="control control-baz">
     <label for="input-baz">Baz label</label>
     <div class="edit">
       <input id="input-baz" name="baz" type="text" value="Model baz value">
     </div>
   </div>

{{{el-field model=model name="jim" type="select" options=opts}}}
Context {model:fooModel, opts:["zim", "bam", "zoom"]}
→  <div class="control control-jim">
     <label for="input-jim">Jim</label>
     <div class="edit">
       <select id="input-jim" name="jim">
         <option value="zim">zim</option>
         <option selected value="bam">bam</option>
         <option value="zoom">zoom</option>
       </select>
     </div>
   </div>

{{{el-field model=model name="flim" type="radio" inputs=opts}}}
Context {model:fooModel, opts:["zim", "zam", "boom"]}
→  <div class="control control-flim">
     <div class="edit">
       <input id="flim-0" name="flim" type="radio" value="zim">
       <label for="flim-0">zim</label>
     </div>
     <div class="edit">
       <input id="flim-1" name="flim" type="radio" value="zam">
       <label for="flim-1">zam</label>
     </div>
     <div class="edit">
       <input checked id="flim-2" name="flim" type="radio" value="boom">
       <label for="flim-2">boom</label>
     </div>
   </div>

{{{el-field model=model name="flim"}}}
Context {model:fooModel}
→  <div class="control control-flim">
     <div class="edit">
       <input id="flim-0" name="flim" type="radio" value="bim">
       <label for="flim-0">Bim label</label>
     </div>
     <div class="edit">
       <input id="flim-1" name="flim" type="radio" value="bam">
       <label for="flim-1">Bam label</label>
     </div>
     <div class="edit">
       <input checked id="flim-2" name="flim" type="radio" value="boom">
       <label for="flim-2">Boom label</label>
     </div>
   </div>

{{{el-field model=model name="jim" type="select"}}}
Context {model:fooModel}
→  <div class="control control-jim">
     <label for="input-jim">Jim</label>
     <div class="edit">
       <select id="input-jim" name="jim">
         <option value="bim">bim</option>
         <option selected value="bam">bam</option>
         <option value="boom">boom</option>
       </select>
     </div>
   </div>

{{{el-field model=model name="wozz" type="select"}}}
Context {model:fooModel}
→  <div class="control control-wozz">
     <label for="input-wozz">Wozz</label>
     <div class="edit">
       <select id="input-wozz" name="wozz">
         <option value="waz">Waz label</option>
         <option value="wez">Wez label</option>
         <option selected value="wiz">Wiz label</option>
       </select>
     </div>
   </div>

{{{el-field model=model name="gozz"}}}
Context {model:fooModel}
→  <div class="control control-gozz">
     <div class="edit">
       <input checked id="gozz-0" name="gozz" type="radio" value="gaz">
       <label for="gozz-0">Gaz label</label>
     </div>
     <div class="edit">
       <input checked id="gozz-1" name="gozz" type="radio" value="gez">
       <label for="gozz-1">Gez label</label>
     </div>
     <div class="edit">
       <input id="gozz-2" name="gozz" type="radio" value="giz">
       <label for="gozz-2">Giz label</label>
     </div>
   </div>

Inheriting a model from the enclosing context

{{#el-form model=model}}{{{el-field name="flim"}}}{{{el-field name="wozz" type="select"}}}{{{el-field name="gozz"}}}{{/el-form}}
Context {model:fooModel}
→  <form method="post">
     <div class="control control-flim">
       <div class="edit">
         <input id="flim-0" name="flim" type="radio" value="bim">
         <label for="flim-0">Bim label</label>
       </div>
       <div class="edit">
         <input id="flim-1" name="flim" type="radio" value="bam">
         <label for="flim-1">Bam label</label>
       </div>
       <div class="edit">
         <input checked id="flim-2" name="flim" type="radio" value="boom">
         <label for="flim-2">Boom label</label>
       </div>
     </div>
     <div class="control control-wozz">
       <label for="input-wozz">Wozz</label>
       <div class="edit">
         <select id="input-wozz" name="wozz">
           <option value="waz">Waz label</option>
           <option value="wez">Wez label</option>
           <option selected value="wiz">Wiz label</option>
         </select>
       </div>
     </div>
     <div class="control control-gozz">
       <div class="edit">
         <input checked id="gozz-0" name="gozz" type="radio" value="gaz">
         <label for="gozz-0">Gaz label</label>
       </div>
     <div class="edit">
       <input checked id="gozz-1" name="gozz" type="radio" value="gez">
       <label for="gozz-1">Gez label</label>
     </div>
     <div class="edit">
       <input id="gozz-2" name="gozz" type="radio" value="giz">
       <label for="gozz-2">Giz label</label>
     </div>
   </div>
 </form>

Data used in examples

Phrase lookup keys

{
    "field.message.heading.error": 'There {{#choose count}}{{#choice "other"}}are {{count}} problems{{/choice}}{{#choice "one"}}is a problem{{/choice}}{{/choose}} with the "{{field}}" field',
    "foo.bar.description": "Bar description",
    "foo.bar.introduction": "Bar introduction",
    "foo.bar.label": "Bar label",
    "foo.bar.help": "Bar help",
    "foo.bar.extra": "Bar extra line 1\nBar extra line 2",
    "foo.baz.label": "Baz label",
    "foo.flim.value.bim.label": "Bim label",
    "foo.flim.value.bam.label": "Bam label",
    "foo.flim.value.boom.label": "Boom label",
    "foo.wozz.value.waz.label": "Waz label",
    "foo.wozz.value.wez.label": "Wez label",
    "foo.wozz.value.wiz.label": "Wiz label",
    "foo.gozz.value.gaz.label": "Gaz label",
    "foo.gozz.value.gez.label": "Gez label",
    "foo.gozz.value.giz.label": "Giz label",
    "really./^x.$/": "Regex lookup"
}

fooModel

{
    attributes: {
        baz: "Model baz value",
        jim: "bam",
        flim: "boom",
        wozz: "wiz",
        gozz: ["gaz", "gez"]
    },
    get: function (name) {
        return this.attributes[name];
    },
    phraseKey: "foo",
    schema: schema
}

schema

{
...
    "properties":{
        "bar": {
            "type":"string",
            "required":true
        },
        "baz": {
            "type":"number"
        },
        "jim": {
            "enum": [
                "bim",
                "bam",
                "boom"
            ]
        },
        "flim": {
            "type": "string",
            "enum": [
                "bim",
                "bam",
                "boom"
            ]
        },
        "wozz": {
            "type": "string",
            "enum": [
                "waz",
                "wez",
                "wiz"
            ]
        },
        "gozz": {
            "type": "array",
            "items": {
                "type": "string",
                "enum": [
                    "gaz",
                    "gez",
                    "giz"
                ]
            }
        }
    }
}
Source:

Members

(private, static) blockList

Blocks to be processed

  • legend
  • introduction
  • label
  • description
  • help
  • error
  • warning
  • info
  • extra
Source:

(private, static) displayBlockOrder

Order of blocks output in display mode

  1. label
  2. main
Source:

(private, static) editBlockOrder

Order of blocks output in edit mode

  1. introduction
  2. label
  3. description
  4. help
  5. main
  6. error
  7. warning
  8. info
  9. extra
Source:
Parameters:
Name Type Attributes Default Description
name string

Input name

Can also be passed as a property of input
id string <optional>
 input-{{name}}

Input id
type string <optional>

Field type
class string | array <optional>

Field class(es)
field object <optional>

Parameters for field wrapper
input object | string <optional>

Parameters for single input
introduction string | object <optional>

Parameters for introduction block
label string | object <optional>

Parameters for label block
description string | object <optional>

Parameters for description block
help string | object <optional>

Parameters for help block
inputs array <optional>

Parameters for multiple inputs within control

If no id is passed as part of the individual inputs items it will be generated as {{id}}-{{n}}
labels array <optional>

If passed, trumps any label passed as part of the corresponding inputs array

If no inputs are passed, labels is used instead
legend string | object <optional>

Optional legend block when multiple inputs are passed

Ignored otherwise
checked array | string <optional>

Values which are checked
inputs-disabled array | string <optional>

Values which are disabled
edit boolean <optional>
 true

Whether to render in edit or display mode
display boolean <optional>
 false

Whether to render in edit or display mode (trumped by edit if defined)
model object <optional>
 this.model

Model from which to retrieve schema, value and phraseKey

If no model is passed, will attempt to use the current context’s model property
phrase-key string <optional>
 {{model.phraseKey}}.{{name}}

String to use as base lookup key

  • blocks {{phraseKey}}.{{blockKey}}
  • multi-input labels when schema type is enum {{phraseKey}}.value.{{fieldOptValue}}.label
error string | array <optional>

Parameters for error block
warning string | array <optional>

Parameters for warning block
info string | array <optional>

Parameters for info block