addon/components/ui-select.js

import Ember from 'ember';
import UiSelectBase from '../mixins/ui-select-base';
import layout from '../templates/components/ui-select';


/**
ui-select component {{#crossLink "mixins.UiSelectBase"}}{{/crossLink}}

@module components
@namespace components 
@class UiSelect
@constructor
*/
export default Ember.Component.extend(UiSelectBase, {
    layout: layout,
    defaultValue: null,
    didUpdateAttrs() {
        this.setupSelected();
    },
    renderDropDown() {
        let that = this;
        this.$().dropdown({
            onLabelCreate: function(label) {
                that.$('input.search').val('');
                return $(label);
            },
            action: function(text, value) {
                that.set('value', value);
                that.$().dropdown('hide');
                if(that.attrs.value === undefined){
                    that.setupSelected();
                }
                if(typeof that.attrs.update === 'function'){
                    that.attrs.update(value);
                }
                if(that.search){
                    that.$('.menu .item').removeClass('filtered');
                }
            }
        });
    },
    isOptionChecked(optionValue) {
        return String(this.value) === optionValue;
    },
    setupSelected: function() {
        this._selectedOptions.clear();
        for (var i = 0; i < this._options.length; i++) {
            let item = this._options[i];
            let checked = this.isOptionChecked(item['value']);
            Ember.set(item, 'selected', checked);
            if (checked) {
                this._selectedOptions.pushObject(item);
            }
        };
    },
    init(){
        this._super(...arguments);
        this.setupSelected();
    },
    isDisplayHolder: Ember.computed('_selectedOptions.[]', function() {
        return this._selectedOptions.filterBy('selected', true).length === 0;
    })
});