obst

components.products-list.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'My Counter app',
  obst: [{name:'Äpfel', price: 2.50},
             {name:'Birnen', price: 3.50},
             {name:'Banenen', price: 1.00}],
  newProductName: '',
  newProductPrice: '',
  actions: {
    saveNewProduct() {
      console.log('speichern funktioniert ? ..');
      const name = this.get('newProductName');
      const price = this.get('newProductPrice');
      this.get('obst').pushObject({name: name, price: price});
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
{{products-list products=obst}}

<form {{action 'saveNewProduct'}}>
<p>ProductName:{{newProductName}}</p>
Name:{{input type="text" value=newProductName}} <br>
Price:{{input type="text" value=newProductPrice}} <br>
<button type="submit">Speichern</button>
</form>
<br>
<br>

templates.components.products-list.hbs

Einkaufsliste:
<ul>
{{#each products as |product|}}
  <li>{{product.name}}: {{product.price}} EUR</li>    
{{else}}
Leer
{{/each}}
 </ul>

twiddle.json

{
  "version": "0.7.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": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.3/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.3/ember-template-compiler.js"
  }
}