Chapter quiz · Routes & Templates

Test what you learned.

8 questions on Routes & Templates. Pass 70% to clear the chapter.

← Review chapter lessons

Quiz

Routes & Templates — Chapter Quiz

Eight questions on the router DSL, model hooks, substates, and query params.

0/ 9

Question 1
1
Where do you define the URL structure of an Ember app?
Aapp/router.jsBapp/routes.jsCconfig/routes.jsDapp/templates/router.hbs
app/router.js exports an EmberRouter and calls Router.map with a DSL describing every route in the app.
Question 2
2
How do you declare a dynamic segment in the router DSL?
Athis.route('post', { path: '/posts/:post_id' })Bthis.route('post', { path: '/posts/{post_id}' })Cthis.route('post', { path: '/posts/<post_id>' })Dthis.dynamic('post')
Ember uses Rails-style :param_name for dynamic segments. The value is passed to the route's model hook in the params arg.
Question 3
3
Which hook on a Route is the right place to fetch data?
AbeforeModelBmodelCafterModelDsetupController
model returns (or resolves to) the data the route's template receives. Async work belongs here — the framework waits for it to settle before rendering.
Question 4
4
A loading template in the same folder as a route is rendered automatically while that route's model hook is pending.
TTrueFFalse
Ember's loading substate looks for a sibling template named loading and shows it during async model resolution.
Question 5
5
How does a route declare nested children?
Athis.route('parent', { children: [...] })Bthis.route('parent', function () { this.route('child') })Cthis.nested('parent', ...)DPlace files in app/routes/parent/
Pass a function as the second arg to this.route and define child routes inside it. The parent's template renders the child via {{outlet}}.
Question 6
6
The template helper that renders the active child route is {{___}}.
{{outlet}} is the slot in a parent template where the active child route's template is rendered.
Question 7
7
Which of these are valid ways to navigate to another route?
Select all that apply.
A<LinkTo @route="post" @model={{this.id}}> in templatesBthis.router.transitionTo("post", id) in JSCwindow.location.href = "/post/" + idDnavigate("post", id)Ethis.transitionTo("post", id) from a Route
<LinkTo> from templates, this.router.transitionTo from components/controllers, and this.transitionTo from routes are idiomatic. Hard window.location navigation does full reloads.
Question 8
8
What is the role of queryParams on a Controller?
ALists tracked properties that should sync to the URL query stringBLists allowed body parameters for POST requestsCLists localStorage keys to persistDAliases dynamic segments
Declaring queryParams = ['page'] and @tracked page = 1 makes the URL reflect changes to page automatically — both directions.