Input Helpers Edit Page
Input Helpers
The {{input}}
and {{textarea}}
helpers in Ember.js are the easiest way to
create common form controls. The {{input}}
helper wraps the built-in
Ember.TextField and Ember.Checkbox views, while {{textarea}}
wraps
Ember.TextArea. Using these helpers, you can create these views with
declarations almost identical to how you'd create a traditional <input>
or
<textarea>
element.
Text fields
Will become:
1 |
<input type="text" value="http://www.facebook.com"/> |
You can pass the following standard <input>
attributes within the input
helper:
value
size
name
pattern
placeholder
disabled
maxlength
tabindex
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.
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
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:
rows
cols
placeholder
disabled
maxlength
tabindex
Extending Built-In Controls
See the Built-in Views section of these guides to learn how to further extend these views.