/** @module ember */ import { assert } from '@ember/debug'; import { wrapComponentClassAttribute } from '../utils/bindings'; import { hashToArgs } from './utils'; function buildSyntax(type, params, hash, builder) { let definition = builder.compiler['resolver'].lookupComponentDefinition(type, builder.referrer); builder.component.static(definition, [params, hashToArgs(hash), null, null]); return true; } /** The `{{input}}` helper lets you create an HTML `` component. It causes an `TextField` component to be rendered. For more info, see the [TextField](/api/ember/release/classes/TextField) docs and the [templates guide](https://guides.emberjs.com/release/templates/input-helpers/). ```handlebars {{input value="987"}} ``` renders as: ```HTML ``` ### 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: ```handlebars Search: {{input value=searchWord}} ``` In this example, the initial value in the `` 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. ```handlebars {{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. ```handlebars {{input focus-out="alertMessage"}} ``` See more about [Text Support Actions](/api/ember/release/classes/TextField) ### Extending `TextField` Internally, `{{input type="text"}}` creates an instance of `TextField`, passing arguments from the helper to `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: ```javascript import TextField from '@ember/component/text-field'; TextField.reopen({ attributeBindings: ['data-error'] }); ``` Keep in mind when writing `TextField` subclasses that `TextField` itself extends `Component`. Expect isolated component semantics, not legacy 1.x view semantics (like `controller` being present). See more about [Ember components](/api/ember/release/classes/Component) ### Checkbox Checkboxes are special forms of the `{{input}}` helper. To create a ``: ```handlebars 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 `Checkbox` Internally, `{{input type="checkbox"}}` creates an instance of `Checkbox`, passing arguments from the helper to `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: ```javascript import Checkbox from '@ember/component/checkbox'; Checkbox.reopen({ classNames: ['my-app-checkbox'] }); ``` @method input @for Ember.Templates.helpers @param {Hash} options @public */ export function inputMacro(_name, params, hash, builder) { if (params === null) { params = []; } if (hash !== null) { let keys = hash[0]; let values = hash[1]; let typeIndex = keys.indexOf('type'); if (typeIndex > -1) { let typeArg = values[typeIndex]; if (Array.isArray(typeArg)) { // there is an AST plugin that converts this to an expression // it really should just compile in the component call too. let inputTypeExpr = params[0]; builder.dynamicComponent(inputTypeExpr, null, params.slice(1), hash, true, null, null); return true; } if (typeArg === 'checkbox') { assert("{{input type='checkbox'}} does not support setting `value=someBooleanValue`; " + 'you must use `checked=someBooleanValue` instead.', keys.indexOf('value') === -1); wrapComponentClassAttribute(hash); return buildSyntax('-checkbox', params, hash, builder); } } } return buildSyntax('-text-field', params, hash, builder); }