use gjs in Linking Between Routes guide

Changed the templates from .hbs to .gjs, and added relevant imports.

I didn't add the import or <template> when it looked like the example was only showing part of a template.

Author: mcfiredrill

guides/release/routing/linking-between-routes.md

@@ -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`
@@ -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>
 ```
 
@@ -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:
@@ -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:
@@ -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|}}
+      <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),
@@ -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`