EMBER-EASYFORM

Ember-EasyForm提供对基础表单的封装，同时提供I18n以及字段校验的功能

formFor助手用法

  {{#form-for model}}
  {{input firstName}}
  {{input lastName}}
  {{input bio as="text"}}
  {{input country as='select'
       collection="App.countries"
       selection="country"
       optionValuePath="content.id"
       optionLabelPath="content.name"
       prompt="Select Country"
  }}
  {{/form-for}}

编译结果

<form>
  <div class="input string">
    <label for="ember1">First name</label>
    <input id="ember1" type="text"/>
    <span class="error"></span>
  </div>
  <div class="input string">
    <label for="ember2">Last name</label>
    <input id="ember2" type="text"/>
    <span class="error"></span>
  </div>
    <div class="input string">
    <label for="ember3">Bio</label>
    <textarea id="ember3"></textarea>
    <span class="error"></span>
  </div>
  <div class="input string">
   <label for="ember4">Country</label>
  <select id="ember4">
   xxx
  </select>
   <span class="error"></span>
  </div>
  </form>

Ember.EasyForm 允许通过设置input的as属性改变input组件的行为

{{input secret as="hidden"}}

Ember.EasyForm 可以根据传入的字段名称判断组件的行为，该行为可被as覆盖

{{input email}}
{{input password}}
<em>第一个输入框type=email 第二个输入框type=password</em>

传入label属性可以设置对象属性的名称

{{input email label="电子邮箱..."}}

label也可以为一个绑定属性

{{input email labelBinding="emailLabel"}}

placeholder设置文本框的占位符

{{input firstName placeholder="Enter your first name"}}
<em>placeholder也可以是一个绑定属性</em>

也可在input中设置hint的属性，该属性将在input校验失败时，进行友好的校验提示

{{input firstName hint="Enter your first name"}}
<em>hint也可以是一个绑定属性</em>

对于复杂的表单属性，也可以将input作为Block Helper使用,其中input-field指代html- input标签

{{#input firstName}}
{{input-field firstName}}{{label-field firstName}}
<br/>
{{error-field firstName}}
{{/input}}

Ember.EasyForm.InputField允许传入一个text作为input的Label

{{label-field firstName text="Your first name"}}

input-field也可以制定as字段，as字段的可选值有

• text -- textArea
• email -- type=email
• password -- type=password
• url
• color
• tel
• search
• hidden
• checkbox

{{input-field bio as="text"}}
{{input-field email}}

error-field

error-field指代校验失败后校验的信息

{{error-field firstName}}

hint-field

hint-field指代在表单校验失败后出现的用户提示信息（如：“用户名不能未空...”）

{{hint-field firstName text="Your first name"}}

表单验证

默认情况下，在表单元素触发了focus-out时，将触发表单的校验

i18n集成

对于需要进行i18n的表单元素，Ember.EasyForm提供Translation后缀，进行表单国际化的工作

{{input firstName placeholderTranslation="users.attributes.firstname"}}
{{input firstName labelTranslation="users.attributes.firstname"}}
{{input firstName hintTranslation="users.hints.firstname"}}
{{input-field firstName placeholderTranslation="users.attributes.firstname"}}
{{label-field firstName textTranslation="users.attributes.firstname"}}
{{hint-field firstName textTranslation="users.hints.firstname"}}

更多I18n内容，见Ember.I18n文档