Хелперы ввода данных
Хелперы {{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}}
позволяет обновлять привязку в соответствии с входными данными. Чтобы получить больше информации, смотрите соответствующую документацию о хелперах.
А вот где посмотреть названия этих самых «специфических событий»? Потому что те, которые описаны в разделе Обработка событий, не работают ни в каком варианте