Хелперы ввода данных

Хелперы {{input}} и {{textarea}} в Ember.js позволяют с легкостью создавать элементы управления стандартной формой. Хелпер {{input}} охватывает встроенные представления Ember.TextField и Ember.Checkbox, а {{textarea}} — Ember.TextArea. С их помощью можно создавать представления, которые объявляются почти идентично созданию стандартных элементов <input> или <textarea>.

Текстовые поля

{{input value="http://www.facebook.com"}}

станет:

<input type="text" value="http://www.facebook.com"/>

Вы можете передавать следующие стандартные атрибуты <input> в рамках хелпера input:

`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`

Если эти атрибуты стоят в строке в кавычках, их значения будут напрямую назначены элементу, как в предыдущем примере. Но без кавычек эти значения будут привязаны к свойству в текущем отображенном контексте шаблона. Например:

{{input type="text" value=firstName disabled=entryNotAllowed size="50"}}

привяжет атрибут disabled к значению entryNotAllowed в текущем контексте.

Действия

Чтобы назначить действие для специфических событий, например enter или key-press, используйте следующее:

{{input value=firstName key-press="updateFirstName"}}

Имена события нужно записывать с тире.

Чекбоксы

Вы также можете использовать хелпер {{input}}, чтобы создать чекбокс, если установите его type:

{{input type="checkbox" name="isAdmin" checked=isAdmin}}

Чекбоксы поддерживают следующие свойства:

checked
disabled
tabindex
indeterminate
name
autofocus
form

В предыдущих разделах описано, как их можно привязать или назначить.

Текстовые области

{{textarea value=name cols="80" rows="6"}}

свяжет значение текстовой области с name текущего контекста.

{{textarea}} поддерживает привязку и/или назначение следующих свойств:

value
name
rows
cols
placeholder
disabled
maxlength
tabindex
selectionEnd
selectionStart
selectionDirection
wrap
readonly
autofocus
form
spellcheck
required

Привязка динамического атрибута

В некоторых случаях вам будет нужно динамически привязывать свойство к входным данным. Например, когда вы создаете свободную форму. Чтобы добиться этого, вам нужно использовать {{get}} и {{mut}} в связке, как показано в следующем примере:

{{input value=(mut (get person field))}}

Хелпер {{get}} позволяет динамически указывать, какое свойство привязывать. А хелпер {{mut}} позволяет обновлять привязку в соответствии с входными данными. Чтобы получить больше информации, смотрите соответствующую документацию о хелперах.