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:22] 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 ===== | ||
| Line 11: | Line 11: | ||
| - 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 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 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 183: | Line 183: | ||
| ===== 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.1656332578.txt.gz ยท Last modified: 2022/06/27 12:22 by sausage
Page Tools
