Showing route {{value.name}}
2 | 6 | 7 | {{#if usePods}} 8 |
9 |
10 | {{input type='text' value=podModulePrefix class='form-control'}}
11 |
12 | {{/if}}
13 | -
14 |
- Url 15 |
-
16 | {{#if value.url}}
17 |
{{value.url}}18 | {{else}} 19 |This route has no URL, as it is a parent route. You will always be in a child state of this route (e.g.
20 | {{/if}} 21 |{{value.name}}.index)
22 | - Route 23 |
{{routeFile}}
24 | - Controller 25 |
{{controllerFile}}
26 | - Template 27 |
{{templateFile}}
28 | - Template Outline 29 |
-
30 |
This is what the nested templates look like for this route. All templates shown below will be visible at the same time when you are in this route:
31 | {{template-visualization parents=parentsAndSelf isShowingSubStates=isShowingSubStates usePods=usePods podModulePrefix=podModulePrefix}} 32 |
33 | {{#if value.url}}
34 | - Route Hooks 35 |
-
36 |
When you visit
37 |{{value.url}}, these are the route hooks that will be called:1. Validation Phase
38 |First all of these model hooks will be called in this order:
39 |-
40 | {{#each parentsAndSelf}}
41 | {{validation-hooks route=this}}
42 | {{/each}}
43 |
2. Setup Phase
45 |If none of the model hooks abort the transition, either by calling
46 |transition.abort()orthis.transitionTo('someOtherRoute'), then these setup hooks will be called in this order after all the validation hooks have run:-
47 | {{#each parentsAndSelf}}
48 | {{setup-hooks route=this}}
49 | {{/each}}
50 |
52 | {{/if}}
53 |
2 |
3 |
4 |
6 |
7 | Like this? Also check out Ember Data Model Maker
5 |
8 |
57 |
--------------------------------------------------------------------------------
/app/components/route-tree.js:
--------------------------------------------------------------------------------
1 | export default Em.Component.extend({
2 | buildVisualization: function () {
3 | if(!this.get('routeTree')) {
4 | return;
5 | }
6 |
7 | this.$().empty();
8 |
9 | var margin = {top: 20, right: 120, bottom: 20, left: 120},
10 | width = 600 - margin.right - margin.left,
11 | height = 500 - margin.top - margin.bottom;
12 | var component = this;
13 | var i = 0;
14 |
15 | var tree = d3.layout.tree()
16 | .size([height, width]);
17 |
18 | var diagonal = d3.svg.diagonal()
19 | .projection(function(d) { return [d.y, d.x]; });
20 |
21 | var svg = d3.select(this.get('element')).append("svg")
22 | .attr("width", width + margin.right + margin.left)
23 | .attr("height", height + margin.top + margin.bottom)
24 | .append("g")
25 | .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
26 |
27 | var visFunc = function (route) {
28 | if (!component.isVisible(route)) {
29 | return 'none';
30 | }
31 | };
32 | var root = this.get('routeTree');
33 |
34 | // Compute the new tree layout.
35 | var nodes = tree.nodes(root).reverse(),
36 | links = tree.links(nodes);
37 |
38 | // Normalize for fixed-depth.
39 | nodes.forEach(function(d) { d.y = d.depth * 120; });
40 |
41 | // Declare the nodes…
42 | var node = svg.selectAll("g.node")
43 | .data(nodes, function(d) { return d.id || (d.id = ++i); });
44 |
45 | // Enter the nodes.
46 | var nodeEnter = node.enter().append("g")
47 | .attr("class", "node")
48 | .style('display', visFunc)
49 | .style('cursor', 'pointer')
50 | .on('click', function (route) {
51 | component.sendAction('action', route);
52 | })
53 | .attr("transform", function(d) {
54 | return "translate(" + d.y + "," + d.x + ")"; });
55 |
56 | nodeEnter.append("circle")
57 | .attr("r", 10)
58 | .style("fill", "#fff")
59 |
60 |
61 | nodeEnter.append("text")
62 | .attr("x", function(d) {
63 | return d.children || d._children ? -13 : 13; })
64 | .attr("dy", ".35em")
65 | .on('click', function (route) {
66 | component.sendAction('action', route);
67 | })
68 | .style('cursor', 'pointer')
69 | .attr("text-anchor", function(d) {
70 | return d.children || d._children ? "end" : "start"; })
71 | .text(function(d) { return d.name; })
72 | .style("fill-opacity", 1)
73 | .style('display', visFunc);
74 |
75 | // Declare the links…
76 | var link = svg.selectAll("path.link")
77 | .data(links, function(d) { return d.target.id; });
78 |
79 | // Enter the links.
80 | link.enter().insert("path", "g")
81 | .attr("class", "link")
82 | .attr("d", diagonal)
83 | .style('display', function (link) {
84 | return visFunc(link.target);
85 | });
86 |
87 |
88 | }.on('didInsertElement').observes('routeTree', 'isShowingSubStates'),
89 |
90 | isVisible: function (route) {
91 | if(!route) { return false; }
92 | if(this.get('isShowingSubStates')) {
93 | return true;
94 | }
95 |
96 | return !route.isSubState;
97 | }
98 | });
99 |
--------------------------------------------------------------------------------
/app/controllers/application.js:
--------------------------------------------------------------------------------
1 | import Ember from "ember";
2 | import RouteDebug from "diagonal/lib/route-debug";
3 |
4 | export default Ember.Controller.extend({
5 | isShowingSubStates: false,
6 | isShowingTree: false,
7 | isShowingList: Em.computed.not('isShowingTree'),
8 |
9 | queryParams: ['routesInput'],
10 |
11 | routesInput: Em.computed( function() {
12 | return "this.route('posts');\n" +
13 | "this.route('post', {path: '/posts/:post_id'}, function () {\n" +
14 | " this.route('new');\n" +
15 | " this.route('edit');\n" +
16 | " this.route('comments', function() {\n" +
17 | " this.route('new');\n" +
18 | " });\n" +
19 | "});\n" +
20 | "this.route('signup');"
21 | }),
22 |
23 | routeTree: Em.computed('theApplication', 'isError', function () {
24 | if (this.get('isError')) {
25 | return null;
26 | }
27 | var rd = RouteDebug.create({
28 | application: this.get('theApplication')
29 | });
30 |
31 | return this.mungeTree(rd.get('routeTree'));
32 | }),
33 |
34 | routeFor: function (name, start) {
35 | var tree = start || this.get('routeTree');
36 | if (tree.value.name == name) {
37 | return tree;
38 | }
39 |
40 | if(tree.children) {
41 | var children = tree.children.map(function (child) {
42 | return this.routeFor(name, child);
43 | }, this).compact();
44 |
45 | if (children.length) {
46 | return children[0];
47 | }
48 | }
49 | },
50 |
51 | mungeTree: function (node, parent, parents) {
52 | node.name = node.value.name;
53 | node.isSubState = node.name.match(/(^|\.)(loading|error)$/);
54 | parents = (parents && parents.slice()) || [];
55 | if(parent) {
56 | node.parent = parent;
57 | parents.push(parent);
58 | }
59 | node.parents = parents;
60 | if(node.children && node.children.length) {
61 | node.children.forEach(function (child) {
62 | this.mungeTree(child, node, parents);
63 | }, this);
64 | }
65 | return node;
66 | },
67 |
68 | isError: Em.computed('theApplication', function () {
69 | return (this.get('theApplication') instanceof Error);
70 | }),
71 |
72 | errorLineNumber: function () {
73 | try {
74 | return this.get('errorMatch')[1]
75 | } catch (e) {
76 | return 'unknown';
77 | }
78 | }.property('errorMatch'),
79 |
80 | errorColumn: function () {
81 | try {
82 | return this.get('errorMatch')[2]
83 | } catch (e) {
84 | return 'unknown';
85 | }
86 | }.property('errorMatch'),
87 |
88 | errorMatch: function () {
89 | return this.get('theApplication').stack.match(/
9 |
15 |
16 |
17 |
18 | {{#if isError}}
19 |
10 |
14 | Diagonal Routes
11 |See what route structure, templates and route hooks are for a given ember route definition. Enter your router code below to see the structure:
12 | {{code-editor value=routesInput}} 13 |20 |
21 |
28 |
29 | {{else}}
30 | 22 | There was an error: {{theApplication.message}} 23 |
24 |25 | Line {{errorLineNumber}} Column {{errorColumn}} 26 |
27 |31 |
32 |
35 |
36 |
37 |
38 |
54 | {{/if}}
55 |
56 |
39 |
43 |
44 | {{#if isShowingTree}}
45 | {{route-tree routeTree=routeTree isShowingSubStates=isShowingSubStates action='showRoute'}}
46 | {{else}}
47 | {{route-displayer route=routeTree isShowingSubStates=isShowingSubStates}}
48 | {{/if}}
49 |
50 |
51 | {{outlet}}
52 |
53 |