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 all commits
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
105 changes: 64 additions & 41 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>
```gjs {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}
```gjs {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>
```gjs {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}}
```gjs {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,29 @@ 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>
```gjs {data-filename=app/templates/photos.gjs}
import { LinkTo } from '@ember/routing';
import { array } from '@ember/helper';

export default class {
get latestComments() {
return this.model.sort((a, b) => new Date(b.date) - new Date(a.date)).slice(0, 5);
}
}

<template>
<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>
</template>
```

Here, we are passing an array of model objects (the photo, then the comment),
Expand All @@ -207,7 +227,7 @@ argument. Therefore, it is an error to pass _both_ arguments at the same time.
The `@query` argument, along with the `{{hash}}` helper, can be used to set
query params on a link:

```handlebars
```gjs
// Explicitly set target query params
<LinkTo @route="posts" @query={{hash direction="asc"}}>Sort</LinkTo>

Expand All @@ -224,10 +244,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>
```gjs {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 All @@ -240,7 +263,7 @@ browser's history when transitioning between routes. However, to replace the
current entry in the browser's history instead, you can use the `@replace`
option:

```handlebars
```gjs
<LinkTo @route="photo.comment" @model={{this.topComment}} @replace={{true}}>
Top comment for the current photo
</Link>
Expand Down