ember-routes-and-troubleshooting
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
ember-routes-and-troubleshooting [2022/06/27 12:06] sausage |
ember-routes-and-troubleshooting [2022/06/27 22:35] (current) sausage |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Ember.js Routes and Troubleshooting ====== | ====== Ember.js Routes and Troubleshooting ====== | ||
| - | One of the nicest features of Ember.js is the ability to easily create a route and a page template and be able to browse to it in seconds. A good understanding of how routing works can help hunt down bugs and unintended data calls. | + | {{ :ember:ember-title-card.jpg?nolink&300|}}One of the nicest features of Ember.js is the ability to easily create a route and a page template and be able to browse to it in seconds. A good understanding of how routing works can help hunt down bugs and unintended data calls. |
| ===== Goals for this article ===== | ===== Goals for this article ===== | ||
| - | - To create a route to /songs, and a template for displaying a list of songs. | + | - To create a route to ''/songs'', and a template for displaying a list of songs. |
| - Creating a fake data call to bring in a list of songs. | - Creating a fake data call to bring in a list of songs. | ||
| - | - Creating a new route to /songs/index (a change of mind where the songs should display). | + | - Creating a new route to ''/songs/index'' (a change of mind where the songs should display). |
| - Removing the old page. | - Removing the old page. | ||
| - Fixing the problem. | - Fixing the problem. | ||
| - | We'll note of this change of mind, and what happens when things are accidentally left behind. | + | We'll note this change of mind, and what happens when things are accidentally left behind. |
| ===== Creating a new site ===== | ===== Creating a new site ===== | ||
| Line 19: | Line 19: | ||
| ember new mysite | ember new mysite | ||
| - | To make things display nicely, add the following CSS to your styles/app.css file: | + | To make things display nicely, add the following CSS to your ''styles/app.css'' file: |
| <code css> | <code css> | ||
| Line 49: | Line 49: | ||
| This will create a route file in ''/routes/songs.js'' and a template file in ''/templates/songs.hbs''. | This will create a route file in ''/routes/songs.js'' and a template file in ''/templates/songs.hbs''. | ||
| - | It will also add the following to the app/router.js file: | + | It will also add the following to the ''app/router.js'' file: |
| <code javascript> | <code javascript> | ||
| Line 77: | Line 77: | ||
| {{ :ember:songs-template-browser.png?nolink |}} | {{ :ember:songs-template-browser.png?nolink |}} | ||
| - | There is a header, some text, and the ''\{\{outlet\}\}'' has been make a bit prettier. | + | There is a header, some text, and the ''%%{{outlet}}%%'' has been make a bit prettier. |
| ===== Make a call for song data ===== | ===== Make a call for song data ===== | ||
| Line 100: | Line 100: | ||
| {{ :ember:songs-route-data-call.png?nolink |}} | {{ :ember:songs-route-data-call.png?nolink |}} | ||
| - | We don't have Ember Data set up, or a model, or even a real API endpoint to get the data from. And we won't. That's ok. Just seeing that our app is trying to load song data when we visit the /song page is enough. | + | We don't have Ember Data set up, or a model, or even a real API endpoint to get the data from. And we won't. That's ok. Just seeing that our app is trying to load song data when we visit the ''/song'' page is enough. |
| It is also enough to illustrate that if song data had returned, we could have looped over it and displayed it in the ''/templates/songs.hbs'' template. | It is also enough to illustrate that if song data had returned, we could have looped over it and displayed it in the ''/templates/songs.hbs'' template. | ||
| Line 142: | Line 142: | ||
| {{ :ember:songs-template-songsindex-template-browser.png?nolink |}} | {{ :ember:songs-template-songsindex-template-browser.png?nolink |}} | ||
| - | Well that's interesting, the template of ''template/songs/index.hbs'' is displaying inside the ''{{outlet}}'' of the ''/templates/songs.hbs'' template. Why is that? | + | Well that's interesting, the template of ''template/songs/index.hbs'' is displaying inside the ''%%{{outlet}}%%'' of the ''/templates/songs.hbs'' template. We've made a nested route. How did we do that? |
| - | The URL of ''/songs'' matches both the route files of ''/routes/songs.js'' and ''routes/songs/index.js''. But ''songs.hbs'' is treated as the parent, and the ''songs/index.hbs'' is a child and is rendered into the patent's ''{{outlet}}''. As you can imagine, this is very useful for setting up parent templates (common headers and footers etc) and child content. | + | The URL of ''/songs'' matches both the route files of ''/routes/songs.js'' and ''routes/songs/index.js''. But ''songs.hbs'' is treated as the parent, and the ''songs/index.hbs'' is a child and is rendered into the patent's ''%%{{outlet}}%%''. As you can imagine, this is very useful for setting up parent templates (common headers and footers etc) and child content. |
| But in our scenario, it is unintended. | But in our scenario, it is unintended. | ||
| Line 159: | Line 159: | ||
| return fetch('http://localhost:4200/some-song-data'); | return fetch('http://localhost:4200/some-song-data'); | ||
| } | } | ||
| + | } | ||
| </code> | </code> | ||
| Line 168: | Line 168: | ||
| ===== Removing the old page ===== | ===== Removing the old page ===== | ||
| - | Suppose the developer is now going to remove the old page so that only '/songs/index' remains and all should be well. ''templates/songs.hbs'' is removed, the site is re-run and a quick deskcheck ensures that the new page is displaying correctly, and the old parent is gone: | + | Suppose the developer is now going to remove the old page so that only ''templates/songs/index.hbs'' remains and all should be well. ''templates/songs.hbs'' is removed, the site is re-run and a quick deskcheck ensures that the new page is displaying correctly, and the old parent is gone: |
| {{ :ember:songsindex-template-browser.png?nolink |}} | {{ :ember:songsindex-template-browser.png?nolink |}} | ||
| Line 176: | Line 176: | ||
| Some time later it is reported that the page load times are slow. A quick check and it's discovered that data is loading twice on the one route. Of course, the first place to start looking is an older parent route that still might be matching and could be causing data calls. | Some time later it is reported that the page load times are slow. A quick check and it's discovered that data is loading twice on the one route. Of course, the first place to start looking is an older parent route that still might be matching and could be causing data calls. | ||
| - | By removing the forgotten route at ''/routes/songs.hbs'', the extra data call is gone. | + | By removing the forgotten route at ''/routes/songs.js'', the extra data call is gone. |
| - | Hope this tip is useful. Happy stoked embers! | + | Hope this tip is useful. Happy ember stoking! |
| ===== Acknowledgements ===== | ===== Acknowledgements ===== | ||
| - | * Thanks to Jeremy.S for his help on the article. | + | * Thanks to Jeremy.S for checking over this article. |
| * A great article that covers similar material on routes is at: [[Getting Started with Ember Octane: Building a Blog | https://emberigniter.com/getting-started-ember-octane-tutorial/]] by Frank Treacy. Well worth a read. | * A great article that covers similar material on routes is at: [[Getting Started with Ember Octane: Building a Blog | https://emberigniter.com/getting-started-ember-octane-tutorial/]] by Frank Treacy. Well worth a read. | ||
ember-routes-and-troubleshooting.1656331564.txt.gz ยท Last modified: 2022/06/27 12:06 by sausage
Page Tools
