{{d-button}} or <DButton>? That is the question

Development

AI-generated summary

The discussion revolves around the usage of {{d-button}} versus <DButton>. david clarifies that the modern ember pattern prefers the use of ‘angle bracket’ syntax, making <DButton> the preferred choice.

pfaffman initially finds this confusing due to an error message referencing <DButton> despite using {{d-button}}. david explains that linting for this syntax is currently only applied to core, not themes or plugins.

The conversation also touches on passing parameters to components. pfaffman notes the difference in passing parameters to <DButton> and <NavItem>. Arkshine explains that the difference in <NavItem> is due to its use of <LinkTo>, which requires separate route and model parameters. Arkshine further clarifies that the difference in parameter passing is because <NavItem> does not involve functions or actions, only passing parameters between components.

1

Continuing the discussion from DButton no longer supports @action as a string. Please refactor to use an closure action instead:

This saved me!

My question now (besides how did it take me 9 months to do this) is whether/when to use {{d-button}} vs <DButton>

2

The modern ember pattern is to use ‘angle bracket’ syntax to invoke components. So <DButton> is preferred.

We lint for this in core, but haven’t yet extended it to themes/plugins.

3

Oh. Hooray. That’s what I thought!

It was especially confusing since the error message compained about <DButton> but I am using {{d-button}}. I’ll go about fixing those Real Soon Now.

Aha. Thanks for the explanation.

4

Wait. So we gave up @actionParam in <DButton> and do this to pass stuff:

        @action={{fn this.addExtraVars this.extraVarsSmtp}}

but in <NavItem> we still stil have this to pass parameters to a route

            @route="pfaffmanager.servers.show"
            @routeParam={{server.id}}
5

It’s a particular case here.

<NavItem> calls <LinkTo> that requires the name of the route to link to (route) and the value to fill the dynamic segment (model, an ID here) to be separate.

<LinkTo
    @route={{@route}}
    @model={{@routeParam}}
  >{{this.contents}}
</LinkTo>

Does that make sense?

6

It’s a fine explanation and I do understand it, but I wouldn’t say it makes sense. :slight_smile:

7

It makes sense because there is no function/action involved here (and it’s not needed) in NavItem. You only want to pass parameters from component to component. You see what I mean? Sorry, I’m so bad at explaining things. :sweat_smile: