The {{input}}
and {{textarea}}
helpers in Ember.js are the easiest way to create common form controls.
Using these helpers, you can create form controls that are almost identical to the native HTML <input>
or <textarea>
elements, but are aware of Ember's two-way bindings and can automatically update.
Text fields
Will become:
<input type="text" value="http://www.facebook.com"/>
You can pass the following standard <input>
attributes within the input
helper:
`readonly` | `required` | `autofocus` |
`value` | `placeholder` | `disabled` |
`size` | `tabindex` | `maxlength` |
`name` | `min` | `max` |
`pattern` | `accept` | `autocomplete` |
`autosave` | `formaction` | `formenctype` |
`formmethod` | `formnovalidate` | `formtarget` |
`height` | `inputmode` | `multiple` |
`step` | `width` | `form` |
`selectionDirection` | `spellcheck` | `type` |
If these attributes are set to a quoted string, their values will be set directly on the element, as in the previous example. However, when left unquoted, these values will be bound to a property on the template's current rendering context. For example:
Will bind the disabled
attribute to the value of entryNotAllowed
in the
current context.
Actions
To dispatch an action on specific events, such as enter
or key-press
, use the following
Event Names must be dasherized.
Checkboxes
You can also use the
{{input}}
helper to create a checkbox by setting its type
:
Checkboxes support the following properties:
checked
disabled
tabindex
indeterminate
name
autofocus
form
Which can be bound or set as described in the previous section.
Text Areas
Will bind the value of the text area to name
on the current context.
{{textarea}}
supports binding and/or setting the following properties:
value
name
rows
cols
placeholder
disabled
maxlength
tabindex
selectionEnd
selectionStart
selectionDirection
wrap
readonly
autofocus
form
spellcheck
required
Binding dynamic attribute
You might need to bind a property dynamically to an input if you're building a flexible form, for example. To achieve this you need to use the {{get}}
and {{mut}}
in conjunction like shown in the following example:
The {{get}}
helper allows you to dynamically specify which property to bind, while the {{mut}}
helper allows the binding to be updated from the input. See the respective helper documentation for more detail.