Curly Braces Component Invocation

Component invocation

Up until 3.4, we could not invoke components using the angle-bracket invocation syntax we used throughout the course, like <StarRating ...>. Instead, we needed to use curly braces with the component’s name in its dasherized form.

Invoking the star-rating component with curly braces, aka. mustaches, looks like:

{{star-rating class="fr" rating=song.rating}}

Also, components that had to be callable with curlies, so all components prior to 3.4, needed to have a dash in their name.

Uses of curly braces

So, why would someone use the curly braces invocation? Two reasons:

1. You have an Ember app before 3.4.
2. You want to use positional parameters when invoking the component.

Positional parameters are passed as just values, not as a value assigned to a key. An example is the curly invocation of the link-to component we’ve been using throughout the app:

{{#link-to "bands.band.songs" band.id class="mt-4"}} 2 (...)
3 {{/link-to}

Here, "bands.band.songs" and band are both positional parameters because they are not part of the params hash. Contrast this with:

<LinkTo @route="bands.band.songs" @model={{band.id}} class="mt-4">

Here, both parameters are named ones, @route and @model.

Angle-bracket invocation feels natural because it has the same syntax as HTML tags, but it doesn’t support positional parameters. I haven’t personally found that to be a nuisance, though.