input (options) public
The {{input}}
helper lets you create an HTML <input />
component. It causes an Ember.TextField
component to be rendered. For more info, see the Ember.TextField docs and the templates guide.
{{input value="987"}}
renders as:
<input type="text" value="987" />
Text field
If no type
option is specified, a default of type 'text' is used.
Many of the standard HTML attributes may be passed to this 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` |
When set to a quoted string, these values will be directly applied to the HTML element. When left unquoted, these values will be bound to a property on the template's current rendering context (most typically a controller instance).
A very common use of this helper is to bind the value
of an input to an Object's attribute:
Search: {{input value=searchWord}}
In this example, the inital value in the <input />
will be set to the value of searchWord
. If the user changes the text, the value of searchWord
will also be updated.
Actions
The helper can send multiple actions based on user events. The action property defines the action which is sent when the user presses the return key.
{{input action="submit"}}
The helper allows some user events to send actions.
enter
insert-newline
escape-press
focus-in
focus-out
key-press
key-up
For example, if you desire an action to be sent when the input is blurred, you only need to setup the action name to the event name property.
{{input focus-out="alertMessage"}}
See more about Text Support Actions
Extending Ember.TextField
Internally, {{input type="text"}}
creates an instance of Ember.TextField
, passing arguments from the helper to Ember.TextField
's create
method. You can extend the capabilities of text inputs in your applications by reopening this class. For example, if you are building a Bootstrap project where data-*
attributes are used, you can add one to the TextField
's attributeBindings
property:
Ember.TextField.reopen({ attributeBindings: ['data-error'] });
Keep in mind when writing Ember.TextField
subclasses that Ember.TextField
itself extends Ember.Component
. Expect isolated component semantics, not legacy 1.x view semantics (like controller
being present).
See more about Ember components
Checkbox
Checkboxes are special forms of the {{input}}
helper. To create a <checkbox />
:
Emberize Everything: {{input type="checkbox" name="isEmberized" checked=isEmberized}}
This will bind checked state of this checkbox to the value of isEmberized
-- if either one changes, it will be reflected in the other.
The following HTML attributes can be set via the helper:
checked
disabled
tabindex
indeterminate
name
autofocus
form
Extending Ember.Checkbox
Internally, {{input type="checkbox"}}
creates an instance of Ember.Checkbox
, passing arguments from the helper to Ember.Checkbox
's create
method. You can extend the capablilties of checkbox inputs in your applications by reopening this class. For example, if you wanted to add a css class to all checkboxes in your application:
Ember.Checkbox.reopen({ classNames: ['my-app-checkbox'] });
Parameters:
-
options
Hash
Please login to continue.