New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  heute: '16.04.2016'
});

food-order.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  foods: [],
  actions: {
    updateFood(food){
      this.get('foods').pushObject(food);
    },
    removeFood(food){
      console.log(`food ${food} was removed`);
      this.get('foods').removeObject(food);
    }
  }
});

food-order.template.hbs

{{select-food onchange=(action 'updateFood')}}

<h3>Food List</h3>

<ul>
{{#each foods as |food|}}
  <li>{{food}} <span onclick={{action 'removeFood' food}}>[x]</span></li>
{{/each}}
</ul>

select-food.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  foods: ['Wasser', 'Obst', 'Gemüße', 'Milch'],
  actions: {
    foodDidChange(value) {
      this.get('onchange')(value);
    }
  }
});

select-food.template.hbs

<label>Choose food</label>
<select onchange={{action 'foodDidChange' value='target.value'}}>
  <option>please select</option>
  {{#each foods as |food|}}
    <option>{{food}}</option>
  {{/each}}
</select>

templates.application.hbs

<h1>My shopping list</h1>
<br>
{{outlet}}
<br>
{{food-order}}
<br>

twiddle.json

{
  "version": "0.7.2",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember-template-compiler.js"
  }
}