update to current idioms

Author: patsy-issa

examples/routing/app/controllers/media.js

@@ -1,25 +1,25 @@
-import { computed } from "@ember/object";
-import { equal } from "@ember/object/computed";
 import Controller from "@ember/controller";
+import { tracked } from "@glimmer/tracking";
 
 export default class MediaController extends Controller {
   queryParams = ["filter"];
-  filter = "albums";
+  @tracked filter = "albums";
 
-  @equal("filter", "albums")
-  showAlbums;
+  get showAlbums() {
+    return this.filter === "albums";
+  }
 
-  @equal("filter", "movies")
-  showMovies;
+  get showMovies() {
+    return this.filter === "movies";
+  }
 
-  @computed("showAlbums", "showMovies")
   get media() {
     if (this.showAlbums) {
       return this.model.albums;
     } else if (this.showMovies) {
       return this.model.movies;
-    } else {
-      return [];
     }
+
+    return [];
   }
 }

examples/routing/app/templates/application.hbs

@@ -1,13 +1,13 @@
 <nav>
   <ul>
     <li>
-      {{link-to "Home" "index"}}
+      <LinkTo @route="index">Home</LinkTo>
     </li>
     <li>
-      {{link-to "Media" "media"}}
+      <LinkTo @route="media">Media</LinkTo>
     </li>
     <li>
-      {{link-to "Error" "fail"}}
+      <LinkTo @route="fail">Error</LinkTo>
     </li>
     <li>
       <a href="/unknown-page">Unknown Page</a>

examples/routing/app/templates/media.hbs

@@ -1,14 +1,14 @@
 <h1>Media</h1>
 
-{{link-to "Albums" (query-params filter="albums")}}
-{{link-to "Movies" (query-params filter="movies")}}
+<LinkTo @query={{hash filter="albums"}}>Albums</LinkTo>
+<LinkTo @query={{hash filter="movies"}}>Movies</LinkTo>
 
 <ul>
-  {{#each media as |medium i|}}
+  {{#each this.media as |medium i|}}
     <li>
-      {{#link-to "media.medium" i}}
+      <LinkTo @route="media.medium" @model={{i}}>
         {{medium.title}}
-      {{/link-to}}
+      </LinkTo>
     </li>
   {{/each}}
 </ul>

examples/routing/app/templates/media/medium.hbs

@@ -1,3 +1,3 @@
 <h1>Medium</h1>
 
-<p>{{model.title}}</p>
+<p>{{this.model.title}}</p>