Dropdown Bootstrap Ember

README_01.md

Bootstrap dropdown.

View Twiddle | Copy Twiddle | View Gist

Original idea of this README taken from @rwjblue

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  list:[
    {value:1,text:'texto 1'},
    {value:2,text:'texto 2'},
    {value:3,text:'texto 3'}
  ],
 
});

application.template.hbs

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
{{drop-down value=value list=list}}
{{value}}

drop-down.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  dropdownOpen: false,
actions: {
    toggleDropdown() {
        this.toggleProperty('dropdownOpen');
    },
    valueClicked(value, text){
      this.set('value', value);
      this.set('textValue', text);
      this.toggleProperty('dropdownOpen');
    },
  changedInput(value){
    this.set('value',value);
  }
}
});

drop-down.template.hbs

<div class="input-group">
  <input type="text" class="form-control" value={{textValue}} oninput={{action "changedInput" value="target.value"}}>
   <div class="input-group-btn dropdown {{if dropdownOpen 'open'}}">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" {{action "toggleDropdown"}}><span class="caret"></span></button> 
		<ul class="dropdown-menu dropdown-menu-right">
		{{#each list as |item|}}
		  <li class="input-sm"><a {{action "valueClicked" item.value item.text}}>{{item.text}}</a></li>
		  <li class="divider"></li>
		{{/each}}
		</ul>
  </div>
</div>

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}