New Twiddle

components.show-item.js

export default Ember.Component.extend({
  init() {
    this._super();
    this.get('item').on('saved', this.itemSaved.bind(this));
  },
  itemSaved() {
    this.$().css({ color: 'deeppink' });
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    saveAllItems() {
      this.get('model').forEach((m) => m.save());
    }
  }
});

models.item.js

import Ember from 'ember';

export default Ember.Object.extend(Ember.Evented, {
  save() {
    this.trigger('saved');
  }
});

router.js

import Ember from 'ember';
var Router = Ember.Router.extend({
  location: 'none'
});

Router.map(function() {
});

export default Router;

routes.application.js

import Ember from 'ember';

import Item from '../models/item';

export default Ember.Route.extend({
  model() {
    return [
      { name: 'Foo' },
      { name: 'Bar' },
      { name: 'Baz' }
    ];
  },
  setupController(controller, model) {
    model = model.map((m) => Item.create(m));
    this._super(controller, model);
  }
});

styles.app.css

body { margin: 12px 16px }

templates.application.hbs

<h1>Items</h1>

<button {{action 'saveAllItems'}}>Save All Items</button>

<ul>
  {{#each model as |item|}}
	  <li>{{show-item item=item}}</li>
  {{/each}}
</ul>

templates.components.show-item.hbs

{{item.name}}