#9 input助手

英文原版：https://guides.emberjs.com/v2.13.0/templates/input-helpers/

{{input}}和{{textarea}}助手是创建常用表单控件的最简单的方式。通过使用这些助手，你可以创建与用原生<input>或<textarea>生成的相同的表单，但是需要清楚的是Ember具有的双向绑定的特性。

文本字段

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

输出：

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

你可以向input助手中传递任何标准的<input>元素的属性：

readonly	required	autofocus
value	placeholder	disabled
selectionDirection	spellcheck	type
size	tabindex	maxlength
name	min	max
pattern	accept	autocomplete
autosave	formaction	formenctype
formmethod	formnovalidate	formtarget
height	inputmode	multiple
step	width	form

如果这些属性的值是用带双引号的，那么双引号中的内容会直接作为属性值。然而，去掉双引号后，这就变成一个变量，并且绑定在当前上下文中的属性上，例如：

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

上面的例子中，disabled属性的值绑定在当前上下文的entryNotAllowed属性上。

Actions

将指定事件分发到某个action上，比如key-press，看下面的例子：

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

事件名称必须用“-“号连接。

Checkboxes

我们也可以使用{{input}}助手创建一个checkbox：

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

checkbox支持以下属性：

checked

disabled

tabindex

indeterminate

name

autofocus

form

TextArea

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

{{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}}助手可以实现通过input的输入来更新绑定。你可查阅助手文档来仔细的了解这两个助手。

本节完