benedikt · February 3, 2019 12:52 · Feb 3, 2019 · Feb 3, 2019
diff --git a/router.js b/router.js
@@ -8,7 +8,9 @@ const Router = EmberRouter.extend({
 
 Router.map(function() {
   this.route('route-a', function() {
-    this.route('route-b');
+    this.route('route-b', function() {
+      this.route('route-d');
+    });
     this.route('route-c');
   });
 });

diff --git a/templates.application.hbs b/templates.application.hbs
@@ -1,6 +1,8 @@
 {{link-to "Route A" "route-a"}}
 {{link-to "Route B" "route-a.route-b"}}
 {{link-to "Route C" "route-a.route-c"}}
+{{link-to "Route D" "route-a.route-b.route-d"}}
+
 
 <br>
 <br>

diff --git a/templates.route-a.route-b.hbs b/templates.route-a.route-b.hbs
@@ -1 +1,5 @@
-{{#-in-element (query-selector "#application-outlet")}}Route B (rendered in application outlet){{/-in-element}}
+{{#-in-element (query-selector "#application-outlet")}}
+	Route B (rendered in application outlet)
+
+	<div class="outlet">{{outlet}}</div>
+{{/-in-element}}
diff --git a/templates.route-a.route-b.route-d.hbs b/templates.route-a.route-b.route-d.hbs
@@ -0,0 +1 @@
+Route D (inside Route B)
diff --git a/controllers.application.js b/controllers.application.js
@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  appName: 'Ember Twiddle'
+});
diff --git a/helpers.query-selector.js b/helpers.query-selector.js
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export function querySelector([selector]) {
+  return document.querySelector(selector);
+}
+
+export default Ember.Helper.helper(querySelector);
diff --git a/router.js b/router.js
@@ -0,0 +1,16 @@
+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('route-a', function() {
+    this.route('route-b');
+    this.route('route-c');
+  });
+});
+
+export default Router;
diff --git a/routes.route-a.js b/routes.route-a.js
@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});
diff --git a/routes.route-a.route-b.js b/routes.route-a.route-b.js
@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});
diff --git a/styles.app.css b/styles.app.css
@@ -0,0 +1,14 @@
+body {
+  margin: 12px 16px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 12pt;
+}
+
+.outlet {
+  border: solid 1px blue;
+  padding: 10px;
+}
+
+#application-outlet {
+  border-color: red;
+}
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -0,0 +1,9 @@
+{{link-to "Route A" "route-a"}}
+{{link-to "Route B" "route-a.route-b"}}
+{{link-to "Route C" "route-a.route-c"}}
+
+<br>
+<br>
+<div class="outlet" id="application-outlet">{{outlet}}</div>
+<br>
+<br>
diff --git a/templates.route-a.hbs b/templates.route-a.hbs
@@ -0,0 +1,3 @@
+Route A
+
+<div class="outlet">{{outlet}}</div>
diff --git a/templates.route-a.route-b.hbs b/templates.route-a.route-b.hbs
@@ -0,0 +1 @@
+{{#-in-element (query-selector "#application-outlet")}}Route B (rendered in application outlet){{/-in-element}}
diff --git a/templates.route-a.route-c.hbs b/templates.route-a.route-c.hbs
@@ -0,0 +1 @@
+Route C (rendered in route-a outlet)
diff --git a/twiddle.json b/twiddle.json
@@ -0,0 +1,19 @@
+{
+  "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"
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{{#-in-element (query-selector "#application-outlet")}}Route B (rendered in application outlet){{/-in-element}}
No results found