API Docs for:
Show:

File: packages/bricksui-form/lib/chosen-select.js

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

/**
 * 重置Ember.EasyForm下拉组件行为,将下拉框组件行为转换为chosen组件,用户通常无需直接使用该组件,
 * 应通过Ember-EasyForm的方式使用该组件
 * 可选的参数有 data-placeholder,表示下拉组件的占位符
 * 使用方式如
 ```handlebars
 {{#form-for model wrapper="bootstrap"}}
 {{input author
 as='select'
 data-placeholder="请选择作者"
 collection="category"
 optionLabelPath="content.value"
 }}
 {{input tags as='select'
 data-placeholder="请选标签"
 multiple=true
 collection="category"
 optionLabelPath="content.value"
 }}
 {{/form-for}}
 ```
 * @class Select
 * @namespace Ember.EasyForm
 */
var ChosenSelect = Ember.EasyForm.Select.reopen({

  classNames: ['form-control'],
  attributeBindings: ['data-placeholder'],

  init: function () {
    this._super();
    this.set('prompt', ' ');  //对于chosen组件,需要存在一个为空的promt

    //once elements trigger blur event,the parentView will show validated result,
    //aim to defer validation
    var parentView = this.get('parentView');
    parentView.focusOut = function () {
      parentView.set(parentView.set('hasFocusedOut', true));
    };

  },

  /**
   * @private
   * @method _elementDestroy
   * @description 在收到通知需进行销毁后,销毁chsen组件
   */
  _elementDestroy: function () {
    this.$().chosen('destroy');
  }.on('willDestroyElement'),


  /**
   * @private
   * @method _updateItem
   * @description 在select的context发生变化后,通知chosen进行视图更新
   */
  _updateItem: function () {
    Ember.run.scheduleOnce('afterRender', this, function () {
      this.$().trigger('chosen:updated');
    });
  }.observes('content.@each'),

  _doShowFocus: function () {
    this.get('parentView').showValidationError();
  },

  _validation: function () {
    var callback = this._doShowFocus.bind(this);
    this.get('parentView.formForModel').validate().then(callback, callback);
  },

  /**
   * @description 在视图渲染完成后,将select组件转换为chosen组件
   * @method _updateDom
   * @private
   */
  _updateDom: function () {

    Ember.run.scheduleOnce('afterRender', this, function () {
      //在select视图渲染成成后,将其转换为chosen下拉框,并监听change事件
      this.$().chosen()
        .on('change chosen:hiding_dropdown', function () {
          //为了取得数组正确的变化,将validate推迟到下一生命周期运行
          Ember.run.next(this, '_validation');
        }.bind(this))
      ;
    });
  }.on('didInsertElement')
});

export default ChosenSelect;