Input Helpers

输入助手

The {{input}} and {{textarea}} helpers in Ember.js are the easiest way to create common form controls. The {{input}} helper wraps the built-in Ember.TextField and Ember.Checkbox views, while {{textarea}} wraps Ember.TextArea. Using these helpers, you can create these views with declarations almost identical to how you’d create a traditional <input> or <textarea> element.

Ember.js中的{{input}}和{{textarea}}助手是创建通用表单控件最简单的方法。{{input}}包裹了Ember.js内置的Ember.TextField和Ember.Checkbox视图，而{{textarea}}则包裹了Ember.TextArea视图。使用这些助手使得创建这些输入视图跟使用传统的<input>或<textarea>元素完全一样。

Text fields

文本输入框

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

Will become:

将会变为：

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

You can pass the following standard <input> attributes within the input helper:

可以将下列标准的<input>属性传给input助手：

  • value
  • size
  • name
  • pattern
  • placeholder
  • disabled
  • maxlength
  • tabindex

If these attributes are set to a quoted string, their values will be set directly on the element, as in the previous example. However, when left unquoted, these values will be bound to a property on the template’s current rendering context. For example:

如果这些属性被设置为一个引号引起来的字符串，那么它们的值将被直接设置到元素上，如同上面的示例中一样。但是，如果没有使用引号，那么属性的值就会与模板当前渲染的上下文的一个属性进行绑定。例如：

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

Will bind the disabled attribute to the value of entryNotAllowed in the current context.

将绑定disabled属性到当前上下文的entryNotAllowed。

Checkboxes

复选框

You can also use the {{input}} helper to create a checkbox by setting its type:

通过设定{{input}}助手的type，可以创建复选框：

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

Checkboxes support the following properties:

复选框支持以下属性：

  • checked
  • disabled
  • tabindex
  • indeterminate
  • name

Which can be bound or set as described in the previous section.

这些属性也可以与之前所说的一样进行设置，或者绑定。

Text Areas

多行文本输入框

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

Will bind the value of the text area to name on the current context.

将绑定文本域的值到当前上下文的name属性。

{{textarea}} supports binding and/or setting the following properties:

{{textarea}}支持绑定或者设置如下属性：

  • rows
  • cols
  • placeholder
  • disabled
  • maxlength
  • tabindex

Extending Built-In Controls

扩展内置控件

See the Built-in Views section of these guides to learn how to further extend these views.

查看指南中内置视图一节来学习如何扩展视图。