3.9 Templates -- Input Helpers

一、Input Helpers

Ember中{{input}}和{{textarea}}是创建常规表单控件最简单的方法。

{{input}}包裹内建的Ember.TextField和Ember.Checkbox视图，然而{{textarea}}包裹Ember.TextArea。使用这些辅助器，你可以用这些声明创建这些视图，和你直接创建<input>和<textarea>几乎相同。

二、Text Fieleds

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

HTML:

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

你可以向input helper传递下面这些标准的<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`

如果这些属性被字符串包括，它们的值将被直接设置到元素上。如果没有引号，这些值将被绑定到模板当前渲染上下文的一个属性。

example:

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

将绑定disalbed属性绑定到当前上下文中entryNotAllowed 值。

三、Actions

为一个action派遣一个特定事件，例如enter或者key-press。

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

四、CheckBoxes

你也可以通过设置type，使用{{input}}去创建一个checkbox。

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

Checkboxes支持以下属性：

• checked
• disabled
• tabindex
• indeterminate
• name
• autofocus
• form

它可以绑定或设置如前一节中所述。

五、Text Areas

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

将会绑定textarea的值到当前上下文中的name。

{{textarea}}支持下面属性：

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

转载于:https://www.cnblogs.com/sunshineground/p/5153167.html