Components Callback Execution

components.multi-select-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: "option"
});

components.multi-select.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: "select",
  attributeBindings: ["type:multiple","style","data-get-values"],
  type:"multiple",
  values: [],
  change: function(){
     this.set("values", []);
     var selectedValue = $(this.element).val(), base = this;
     $.each(selectedValue, function(index, item){
        base.get("values").push({"name":item});
     });
  },
  didUpdateAttrs: function(options){
    if(options.oldAttrs["data-get-values"].value !== options.newAttrs["data-get-values"].value && options.newAttrs["data-get-values"].value){
        this.attrs.retrieveValues(this.get("values"));
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  myItems: [],
  updateArray: false,
  actions:{
      onFetchingValues: function(val){
        this.set("myItems", val);
        var base = this;
        Ember.run.later( function(){
          base.set("updateArray", false);
        }, 100);
      },
      fetchValue: function(){
           this.set("updateArray", true);
      }
  }
});

templates.application.hbs

<h3>Multi Select Component</h3>

{{#multi-select style="width:200px;height:100px;"  data-get-values=updateArray retrieveValues=(action "onFetchingValues") }}
 {{#multi-select-item}} Green {{/multi-select-item}}
 {{#multi-select-item}} Blue {{/multi-select-item}}
 {{#multi-select-item}} Red {{/multi-select-item}}
 {{#multi-select-item}} Yellow {{/multi-select-item}}
 {{#multi-select-item}} Maroon {{/multi-select-item}}
{{/multi-select}}<br/>
<p>Selected Values</p>
<ul>
{{#each myItems as |item|}}
<li>{{item.name}}</li>
{{/each}}
</ul>
<button {{action "fetchValue"}}>Get Selected Values</button>
<br>
<br>

templates.components.multi-select-item.hbs

{{yield}}

templates.components.multi-select.hbs

{{yield}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}