API Docs for:
Show:

File: packages/bricksui-form/lib/form-docs.js

/**
 @module bricksui
 @submodule bricksui-form
 */

/**
 #####[EMBER-EASYFORM](https://github.com/dockyard/ember-easyForm)
 Ember-EasyForm提供对基础表单的封装,同时提供I18n以及字段校验的功能

 #####formFor助手用法
 ```handlebars
   {{#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}}
 ```
 编译结果

 ```html
 <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组件的行为
 ```handlebars
 {{input secret as="hidden"}}
 ```
 ----------------------------------------
 Ember.EasyForm 可以根据传入的字段名称判断组件的行为,该行为可被as覆盖

 ```handlebars
 {{input email}}
 {{input password}}
 <em>第一个输入框type=email 第二个输入框type=password</em>
 ```
 ------------------------------------------
 传入label属性可以设置对象属性的名称
 ```handlebars
 {{input email label="电子邮箱..."}}
 ```

 label也可以为一个绑定属性
 ```handlebars
 {{input email labelBinding="emailLabel"}}
 ```

 placeholder设置文本框的占位符
 ```handlebars
 {{input firstName placeholder="Enter your first name"}}
 <em>placeholder也可以是一个绑定属性</em>
 ```

 也可在input中设置hint的属性,该属性将在input校验失败时,进行友好的校验提示
 ```handlebars
 {{input firstName hint="Enter your first name"}}
 <em>hint也可以是一个绑定属性</em>
 ```

 ------------------------------------------
 对于复杂的表单属性,也可以将input作为Block Helper使用,其中input-field指代html- input标签
 ```handlebars
 {{#input firstName}}
 {{input-field firstName}}{{label-field firstName}}
 <br/>
 {{error-field firstName}}
 {{/input}}
 ```

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

 ```handlebars
 {{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

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

 ----------------------------

 #####error-field
 error-field指代校验失败后校验的信息
 ```handlebars
 {{error-field firstName}}
 ```

 ---------------------------------
 #####hint-field
 hint-field指代在表单校验失败后出现的用户提示信息(如:“用户名不能未空...”)
 ```handlebars
 {{hint-field firstName text="Your first name"}}
 ```


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

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

 ```handlebars
 {{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文档__


 @namespace Ember
 @class EasyForm
 */



/**
  Ember.EasyForm配置项,可以向Config内注册自定义组件,注册自定义模板等
  @class Config
  @namespace Ember.EasyForm
 */

/**
 ###Wrapper
 Wrapper定义了EasyForm渲染视图时的样式与模板

 可定制项包括:
 + fieldErrorClass - class used by the field containing errors
 + formClass - class used by the form
 + inputClass - class used by the div containing all elements of the input (label, input, error and hint)
 + errorClass - class used by the error message
 + hintClass - class used by the hint message
 + labelClass - class used by the label
 + inputTemplate - template used by {{input}}
 + labelTemplate - template used by {{label-field}}
 + errorTemplate - template used by {{error-field}}
 + hintTemplate - template used by {{hint-field}}

 ####默认Wrapper配置情况
 + formClass - "" (empty)
 + fieldErrorClass - "fieldWithErrors"
 + inputClass - "input"
 + errorClass - "error"
 + hintClass - "hint"
 + labelClass - "" (empty)
 + inputTemplate - "easyForm/input"
 + labelTemplate - "easyForm/label"
 + errorTemplate - "easyForm/error"
 + hintTemplate - "easyForm/hint"

 @property Wrapper
 @memberOf Ember.EasyForm
 */




/**
 向Ember.EasyForm Wrapper中注册一个Wraper
 ```javascript
 Ember.EasyForm.Config.registerWrapper('my-wrapper', {
  formClass: 'my-form',
  errorClass: 'my-error',
  hintClass: 'my-hint',
  labelClass: 'my-label'
});
 ```

 ```handlebars
 {{#form-for model wrapper="my-wrapper"}}
   {{input firstName}}
   {{input lastName}}
 {{/form-for}}
 ```
 编译结果为
 ```html
   <form class="my-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" class="my-label">Last name</label>
       <input id="ember2" type="text"/>
       <span class="error my-error"></span>
     </div>
   </form>
 ```

 ----------------------------------------
 Ember.EasyForm也支持向Wrapper中注册模板
 ```javascript
     Ember.EasyForm.Config.registerWrapper('twitter-bootstrap', {
      // Define the custom template
      inputTemplate: 'bootstrap-input',

      // Define a custom config used by the template
      controlsWrapperClass: 'controls',

      // Define the classes for the form, label, error...
      formClass: 'form-horizontal',
      fieldErrorClass: 'error',
      errorClass: 'help-inline',
      hintClass: 'help-block',
      labelClass: 'control-label',
      inputClass: 'control-group'
    });
 ```
 bootstrap-input模板
 ```handlebars
   {{label-field propertyBinding="view.property" textBinding="view.label"}}
       <div class="{{unbound view.wrapperConfig.controlsWrapperClass}}">
   {{partial "easyForm/inputControls"}}
 </div>
 ```



 @method registerWrapper
 @for Ember.EasyForm.Config
 */