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

Хелперы {{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:

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

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

Написать комментарий