Correct way to pass arguments to built-in components with angle-bracket syntax

@balint wrote:

Hi everyone,

I’m updating the Rock & Roll with Ember.js book to 3.10 and started converting the built-in components to the angle-bracket syntax (see release blog post).

Both the release blog post and the original RFC gives examples where the HTML attributes passed to these components are prefixed with @:

<Input
  @type="text"
  @class="rr-input"
  @placeholder="New band"
  @value={{newBandName}}
/>

This just doesn’t feel right to me, let me explain why.

One of the advantages of angle-bracket invocation is that readers of the template can easily tell apart at a glance HTML attributes from component arguments. One such example would be:

<StarRating
  class="fr"
  @rating={{song.rating}}
  @onClick={{action "updateRating" song}}
/>

I can see right away that class is an HTML attribute (and will be bound to the outer element in classic components) @rating and @onClick are component arguments.

Prefixing all keys of a component call with @ blurs that line and is also very hard to teach. Why should one use class for custom (non built-in) components and @class in built-in ones? Why make an exception with what could be regarded as teaching examples?

I went ahead and tried using non-prefixed keys for Input, Textarea and LinkTo and it works for all attributes, except value:

<Input
  type="text"
  class="rr-input"
  placeholder="New band"
  @value={{newBandName}}
/>

<LinkTo
  @route="bands.band"
  @model={{band.id}}
  class="rr-band-link"
  data-test-rr="band-link"
>
  {{capitalize band.name}}
  <span class="rr-pointer">
    {{fa-icon "angle-right"}}
  </span>
</LinkTo>

<Textarea
  class="rr-textarea"
  data-test-rr="band-description-field"
  @value={{@band.description}}
  @focus-out={{action (mut showErrors.description) true}}
/>

There is probably a reason I’m missing but if we have to use @class, @type, @disabled, @placeholder, I’d like to understand it.

Posts: 1

Participants: 1

Read full topic