Skip to content

use gjs in Linking Between Routes guide #2175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

use gjs in Linking Between Routes guide #2175

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
88854a5
use gjs in Linking Between Routes guide
mcfiredrill Oct 23, 2025
9eb2719
update language on code blocks
mcfiredrill Oct 24, 2025
c2c7a2a
use @controller in example
mcfiredrill Oct 26, 2025
8cda408
use backing class
mcfiredrill Oct 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 54 additions & 39 deletions guides/release/routing/linking-between-routes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,17 @@ Router.map(function() {
});
```

```handlebars {data-filename=app/templates/photos.hbs}
<ul>
{{#each this.photos as |p|}}
<li>
<LinkTo @route="photos.edit" @model={{p}}>{{p.title}}</LinkTo>
</li>
{{/each}}
</ul>
```handlebars {data-filename=app/templates/photos.gjs}
import { LinkTo } from '@ember/routing';
<template>
<ul>
{{#each this.photos as |p|}}
<li>
<LinkTo @route="photos.edit" @model={{p}}>{{p.title}}</LinkTo>
</li>
{{/each}}
</ul>
</template>
```

The `@route` argument is the name of the route to link to, and the `@model`
Expand Down Expand Up @@ -56,7 +59,7 @@ behavior can be customized within `PhotoEditRoute`'s `serialize` hook.
Alternatively, you can explicitly provide a serialized `id`, in place of
passing a model object:

```handlebars {data-filename=app/templates/photos.hbs}
```handlebars {data-filename=app/templates/photos.gjs}
<LinkTo @route="photos.edit" @model="1">First Photo Ever</LinkTo>
```

Expand Down Expand Up @@ -93,14 +96,17 @@ will be given the `active` CSS class. For example, if you were at the URL

The CSS class name used for active classes can be customized for a single use of `<LinkTo />` by passing an `@activeClass` argument:

```handlebars {data-filename=app/templates/photos.hbs}
<ul>
{{#each this.photos as |p|}}
<li>
<LinkTo @route="photos.edit" @model={{p}} @activeClass="font-bold">{{p.title}}</LinkTo>
</li>
{{/each}}
</ul>
```handlebars {data-filename=app/templates/photos.gjs}
import { LinkTo } from '@ember/routing';
<template>
<ul>
{{#each this.photos as |p|}}
<li>
<LinkTo @route="photos.edit" @model={{p}} @activeClass="font-bold">{{p.title}}</LinkTo>
</li>
{{/each}}
</ul>
</template>
```

will result in:
Expand Down Expand Up @@ -146,12 +152,15 @@ URL.

For example, if we are currently on `/photos/2`, then the following template:

```handlebars {data-filename=app/templates/photos/photo.hbs}
{{#each this.photo.comments as |comment|}}
<LinkTo @route="photos.photo.comment" @model={{comment}}>
{{excerpt comment.body}}...
</LinkTo>
{{/each}}
```handlebars {data-filename=app/templates/photos/photo.gjs}
import { LinkTo } from '@ember/routing';
<template>
{{#each this.photo.comments as |comment|}}
<LinkTo @route="photos.photo.comment" @model={{comment}}>
{{excerpt comment.body}}...
</LinkTo>
{{/each}}
</template>
```

...will render something like this:
Expand Down Expand Up @@ -182,18 +191,21 @@ To solve this problem, or maybe to cross-link comments from photos other than
the currently active one, you can pass an array of model objects using the
`@models` argument and the `{{array}}` helper:

```handlebars {data-filename=app/templates/photos.hbs}
<h1>Latest Comments</h1>

<ul>
{{#each this.latestComments as |comment|}}
<li>
<LinkTo @route="photos.photo.comment" @models={{array comment.photo comment}}>
{{excerpt comment.body}}...
</LinkTo>
</li>
{{/each}}
</ul>
```handlebars {data-filename=app/templates/photos.gjs}
import { LinkTo } from '@ember/routing';
<template>
<h1>Latest Comments</h1>

<ul>
{{#each this.latestComments as |comment|}}
Copy link

@SanderKnauff SanderKnauff Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this.latestComments still work in route templates?
Shouldn't this be @controller.latestComments?

Copy link
Member

@mansona mansona Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

very good point 👍 yes that would need to be @controller

Copy link

@SanderKnauff SanderKnauff Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In that case, it probably applies to the other references to this as well so those also should be updated

Copy link
Contributor

@tcjr tcjr Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I was just going to suggest that you look at all the this. references in the newly converted gjs files. Some may come from the model and some from a controller.

Additionally, you will need to add import statements for everything you use in the template, like array and excerpt used below.

Copy link
Member

@mansona mansona Oct 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

well just to be clear here, until you explicitly added the file name this template wasn't technically wrong. You had "plausable denyability" that you were dealing with a component or something (although there was no backing class so the argument is very weak).

If you want to be 100% correct there should be a backing class that shows some latestComments and you can see what the template is referring to without having to guess that there is a controller that happens to have the latestComments field on it.

I hope all that makes sense

Copy link
Contributor Author

@mcfiredrill mcfiredrill Oct 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the feedback! I think I know what to do, I'm working on addressing this now then I'll ask for more feedback.

Copy link
Contributor Author

@mcfiredrill mcfiredrill Oct 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be better to write a backing class in the template or assume that latestComments came from a controller and just use @controller.latestComments ?

Copy link
Contributor

@NullVoxPopuli NullVoxPopuli Oct 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hate controllers, so I'm a fan of using the stateful component pattern instead of controller lol

Copy link
Contributor Author

@mcfiredrill mcfiredrill Oct 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I guess we don't necessarily need to indrectly encourage controller use here

Copy link
Contributor Author

@mcfiredrill mcfiredrill Oct 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a backing class version, although we had some discussion about longer term direction in the discord. https://discord.com/channels/480462759797063690/480777444203429888/1432054589661778003

<li>
<LinkTo @route="photos.photo.comment" @models={{array comment.photo comment}}>
{{excerpt comment.body}}...
</LinkTo>
</li>
{{/each}}
</ul>
</template>
```

Here, we are passing an array of model objects (the photo, then the comment),
Expand Down Expand Up @@ -224,10 +236,13 @@ example, it is quite common to want to add additional CSS classes to the
generated link tag, or specifying the appropriate ARIA attributes. You can
simply pass them along with the invocation:

```handlebars {data-filename=app/templates/photos/edit.hbs}
<LinkTo @route="photos" class="btn btn-primary" role="button" aria-pressed="false">
Discard Changes
</LinkTo>
```handlebars {data-filename=app/templates/photos/edit.gjs}
import { LinkTo } from '@ember/routing';
<template>
<LinkTo @route="photos" class="btn btn-primary" role="button" aria-pressed="false">
Discard Changes
</LinkTo>
</template>
```

CSS classes passed this way will be _in addition to_ the standard `ember-view`
Expand Down