Chapter quiz · Components & Glimmer

Test what you learned.

8 questions on Components & Glimmer. Pass 70% to clear the chapter.

← Review chapter lessons

Quiz

Components & Glimmer — Chapter Quiz

Eight questions on Glimmer components, tracked properties, actions, and blocks.

0/ 9

Question 1
1
Which base class do modern Ember components extend?
A@ember/componentB@glimmer/componentC@ember/objectD@ember/web-component
Octane components extend Component from @glimmer/component. The legacy @ember/component is the classic component, kept for backwards compatibility.
Question 2
2
How are component arguments accessed inside the class?
Athis.props.<name>Bthis.args.<name>Cthis.attrs.<name>Dthis.<name> directly
Args passed as @foo={{...}} are available as this.args.foo in the class and @foo in the template. They are immutable from the child's perspective.
Question 3
3
What does @action do?
AMarks a method as an event handler with this bound to the instanceBRegisters the method as a route actionCMemoizes the methodDMakes the method asynchronous
@action from @ember/object binds this so the method works correctly when passed as an event handler.
Question 4
4
{{on}} is Ember's modern way to attach DOM listeners and is essentially addEventListener with automatic cleanup.
TTrueFFalse
{{on "click" this.handler}} adds a listener and removes it when the element is destroyed — the modern replacement for the classic {{action}} helper.
Question 5
5
Which modifier runs once when an element is inserted into the DOM?
A{{on "load"}}B{{did-insert}}C{{render}}D{{mounted}}
{{did-insert this.setup}} from @ember/render-modifiers calls the handler once on insert. Pair with {{will-destroy}} for cleanup.
Question 6
6
The block-yielding keyword in a component template is ___.
{{yield}} renders the block passed by the caller, similar to children/slots in other frameworks. You can yield values too: {{yield this.item}}.
Question 7
7
Which patterns correctly mutate a tracked array so the UI re-renders?
Select all that apply.
Athis.items.push(item)Bthis.items = [...this.items, item]Cthis.items = this.items.concat(item)Dthis.items[0] = itemEUse TrackedArray from tracked-built-ins
@tracked only sees assignments. Replacing the array (spread, concat) or using TrackedArray triggers updates. In-place mutations like push do not.
Question 8
8
What does the fn helper do?
ADefines a new function in the templateBPartially applies arguments to a functionCMarks a function as a helperDThrows if called with no arguments
(fn this.delete item.id) returns a function that calls this.delete(item.id, ...laterArgs) — useful inside {{each}}.