Route action bubbling examples

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Teams'
});

controllers.teams.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    delete(team) {
      // controller and route action names must differ
      this.send('deleteTeam', team);
    }
  }
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('teams', function() {
    this.route('new');
    this.route('show', { path: ':team_id' });
    this.route('edit', { path: ':team_id/edit '});
  });
});

export default Router;

routes.teams.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return [
      { id: 1, name: "Team 1" },
      { id: 2, name: "Team 2" }
    ];
  }
});

routes.teams.js

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    saveTeam(team) {
      alert(`${team.name} saved.`);
      this.transitionTo('teams.index');
    },
    deleteTeam(team) {
      alert(`${team.name} deleted.`);
    }
  }
});

routes.teams.new.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return { name: '' };
  }
});

templates.application.hbs

{{#link-to 'teams'}}
  Teams
{{/link-to}}

{{outlet}}

templates.components.team-form.hbs

{{input placeholder="Name" value=team.name}}
<button {{action (action save team)}}>
  save
</button>

templates.teams.edit.hbs

<p>
  Editing {{model.name}}
</p>

{{input placeholder="Name" value=model.name}}

<button {{action 'saveTeam' model}}>Save</button>

templates.teams.hbs

{{outlet}}

templates.teams.index.hbs

<p>
  All teams:
</p>

{{#each model as |team|}}
  {{#link-to 'teams.edit' team}}
    {{team.name}}

  {{/link-to}}
  <button {{action 'delete' team}}>
    x
  </button>
  <br>
{{/each}}

<p>
  {{#link-to 'teams.new'}}
    New team
  {{/link-to}}
</p>

templates.teams.new.hbs

<p>
  New team
</p>

{{team-form
  team=model
  save=(route-action 'saveTeam')
}}

templates.teams.show.hbs

<p>
  Showing {{model.name}}
</p>

twiddle.json

{
  "version": "0.10.6",
  "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.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {
  	"ember-route-action-helper": "2.0.0"
  }
}