Skip to content

Instantly share code, notes, and snippets.

@k-fish
Last active February 28, 2020 21:16
Show Gist options
  • Save k-fish/96eb2f384e39e4945dfc8b05bd36855e to your computer and use it in GitHub Desktop.
Save k-fish/96eb2f384e39e4945dfc8b05bd36855e to your computer and use it in GitHub Desktop.
Parent / Child routes
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
import EmberRouter from '@ember/routing/router';
import config from './config/environment';
const Router = EmberRouter.extend({
location: 'none',
rootURL: config.rootURL
});
Router.map(function() {
this.route('parent-route', { path: '/' }, function() {
this.route('child-route', { path: '/' });
});
});
export default Router;
import Ember from 'ember';
export default Ember.Route.extend({
actions: {
childAction() {
this.send('parentAction', 'Yo');
}
}
});
import Ember from 'ember';
export default Ember.Route.extend({
setupController() {
this._super(...arguments);
this.set('controller.parentNameValue', 'None');
},
actions: {
parentAction(value) {
this.set('controller.parentNameValue', value);
}
}
});
<h1>Parent / Child route example</h1>
<br>
<br>
{{outlet}}
<br>
<br>
<div style="background-color: hsl(0,50%,80%); padding: 40px; margin: 20px; display: flex; flex-direction: column; align-items: center;">
<h3> Child Route </h3>
<button {{action 'childAction'}}>Send Child Action</button>
</div>
<div style="background-color: hsl(240,50%,80%); padding: 40px; display: flex; flex-direction: column; align-items: center;">
<h3> Parent Route </h3>
<span>Value from child: {{parentNameValue}}</span>
{{outlet}}
</div>
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment