En En

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


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


Комментарии (0)

    Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.