Skip to content

Commit 09cad6b

Browse files
mansonamansona
authored
Merge pull request #2151 from ember-learn/gjs-tutorial
Apply the changes to the tutorial for the gjs branch
2 parents 2baf046 + e401fba commit 09cad6b

11 files changed

+1513
-1176
lines changed

‎guides/release/tutorial/part-1/automated-testing.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ If you watch really carefully, you can see our test robot roaming around our app
125125

126126
It happens really quickly though—blink and you might miss it! In fact, I had to slow this animation down by a hundred times just so you can see it in action. I told you the robot has really, really fast hands!
127127

128-
As much as I enjoy watching this robot hard at work, the important thing here is that the test we wrote has _passed_, meaning everything is working exactly as we expect and the test UI is all green and happy. If you want, you can go to `index.hbs`, delete the `<LinkTo>` component and see what things look like when we have _a failing test_.
128+
As much as I enjoy watching this robot hard at work, the important thing here is that the test we wrote has _passed_, meaning everything is working exactly as we expect and the test UI is all green and happy. If you want, you can go to `index.gjs`, delete the `<LinkTo>` component and see what things look like when we have _a failing test_.
129129

130130
<img src="/images/tutorial/part-1/automated-testing/[email protected]" alt="A failing test" width="1024" height="768">
131131

‎guides/release/tutorial/part-1/building-pages.md‎

Lines changed: 82 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -43,18 +43,20 @@ This adds a _[route](../../../routing/defining-your-routes/)_ named "about", whi
4343

4444
## Using Route Templates
4545

46-
With that in place, we can create a new `app/templates/about.hbs` template with the following content:
47-
48-
```handlebars { data-filename="app/templates/about.hbs" }
49-
<div class="jumbo">
50-
<div class="right tomster"></div>
51-
<h2>About Super Rentals</h2>
52-
<p>
53-
The Super Rentals website is a delightful project created to explore Ember.
54-
By building a property rental site, we can simultaneously imagine traveling
55-
AND building Ember applications.
56-
</p>
57-
</div>
46+
With that in place, we can create a new `app/templates/about.gjs` template with the following content:
47+
48+
```gjs { data-filename="app/templates/about.gjs" }
49+
<template>
50+
<div class="jumbo">
51+
<div class="right tomster"></div>
52+
<h2>About Super Rentals</h2>
53+
<p>
54+
The Super Rentals website is a delightful project created to explore Ember.
55+
By building a property rental site, we can simultaneously imagine traveling
56+
AND building Ember applications.
57+
</p>
58+
</div>
59+
</template>
5860
```
5961

6062
To see this in action, navigate to `http://localhost:4200/about`.
@@ -86,26 +88,28 @@ Router.map(function () {
8688

8789
Here, we added the `contact` route, but explicitly specified a path for the route. This allows us to keep the legacy URL, but use the new, shorter name for the route, as well as the template filename.
8890

89-
Speaking of the template, let's create that as well. We'll add a `app/templates/contact.hbs` file:
90-
91-
```handlebars { data-filename="app/templates/contact.hbs" }
92-
<div class="jumbo">
93-
<div class="right tomster"></div>
94-
<h2>Contact Us</h2>
95-
<p>
96-
Super Rentals Representatives would love to help you<br>
97-
choose a destination or answer any questions you may have.
98-
</p>
99-
<address>
100-
Super Rentals HQ
91+
Speaking of the template, let's create that as well. We'll add a `app/templates/contact.gjs` file:
92+
93+
```gjs { data-filename="app/templates/contact.gjs" }
94+
<template>
95+
<div class="jumbo">
96+
<div class="right tomster"></div>
97+
<h2>Contact Us</h2>
10198
<p>
102-
1212 Test Address Avenue<br>
103-
Testington, OR 97233
99+
Super Rentals Representatives would love to help you<br>
100+
choose a destination or answer any questions you may have.
104101
</p>
105-
<a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
106-
<a href="mailto:[email protected]">[email protected]</a>
107-
</address>
108-
</div>
102+
<address>
103+
Super Rentals HQ
104+
<p>
105+
1212 Test Address Avenue<br>
106+
Testington, OR 97233
107+
</p>
108+
<a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
109+
<a href="mailto:[email protected]">[email protected]</a>
110+
</address>
111+
</div>
112+
</template>
109113
```
110114

111115
Ember comes with strong _conventions_ and sensible defaults—if we were starting from scratch, we wouldn't mind the default `/contact` URL. However, if the defaults don't work for us, it is no problem at all to customize Ember for our needs!
@@ -122,52 +126,64 @@ Since Ember offers great support for URLs out-of-the-box, we _could_ just link o
122126

123127
With Ember, we can do better than that! Instead of the plain-old `<a>` tag, Ember provides an alternative called `<LinkTo>`. For example, here is how you would use it on the pages we just created:
124128

125-
```handlebars { data-filename="app/templates/index.hbs" data-diff="+5" }
126-
<div class="jumbo">
127-
<div class="right tomster"></div>
128-
<h2>Welcome to Super Rentals!</h2>
129-
<p>We hope you find exactly what you're looking for in a place to stay.</p>
130-
<LinkTo @route="about" class="button">About Us</LinkTo>
131-
</div>
129+
```gjs { data-filename="app/templates/index.gjs" data-diff="+1,+2,+8" }
130+
import { LinkTo } from '@ember/routing';
131+
132+
<template>
133+
<div class="jumbo">
134+
<div class="right tomster"></div>
135+
<h2>Welcome to Super Rentals!</h2>
136+
<p>We hope you find exactly what you're looking for in a place to stay.</p>
137+
<LinkTo @route="about" class="button">About Us</LinkTo>
138+
</div>
139+
</template>
132140
```
133141

134-
```handlebars { data-filename="app/templates/about.hbs" data-diff="+9" }
135-
<div class="jumbo">
136-
<div class="right tomster"></div>
137-
<h2>About Super Rentals</h2>
138-
<p>
139-
The Super Rentals website is a delightful project created to explore Ember.
140-
By building a property rental site, we can simultaneously imagine traveling
141-
AND building Ember applications.
142-
</p>
143-
<LinkTo @route="contact" class="button">Contact Us</LinkTo>
144-
</div>
142+
```gjs { data-filename="app/templates/about.gjs" data-diff="+1,+2,+12" }
143+
import { LinkTo } from '@ember/routing';
144+
145+
<template>
146+
<div class="jumbo">
147+
<div class="right tomster"></div>
148+
<h2>About Super Rentals</h2>
149+
<p>
150+
The Super Rentals website is a delightful project created to explore Ember.
151+
By building a property rental site, we can simultaneously imagine traveling
152+
AND building Ember applications.
153+
</p>
154+
<LinkTo @route="contact" class="button">Contact Us</LinkTo>
155+
</div>
156+
</template>
145157
```
146158

147-
```handlebars { data-filename="app/templates/contact.hbs" data-diff="+17" }
148-
<div class="jumbo">
149-
<div class="right tomster"></div>
150-
<h2>Contact Us</h2>
151-
<p>
152-
Super Rentals Representatives would love to help you<br>
153-
choose a destination or answer any questions you may have.
154-
</p>
155-
<address>
156-
Super Rentals HQ
159+
```gjs { data-filename="app/templates/contact.gjs" data-diff="+1,+2,+20" }
160+
import { LinkTo } from '@ember/routing';
161+
162+
<template>
163+
<div class="jumbo">
164+
<div class="right tomster"></div>
165+
<h2>Contact Us</h2>
157166
<p>
158-
1212 Test Address Avenue<br>
159-
Testington, OR 97233
167+
Super Rentals Representatives would love to help you<br>
168+
choose a destination or answer any questions you may have.
160169
</p>
161-
<a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
162-
<a href="mailto:[email protected]">[email protected]</a>
163-
</address>
164-
<LinkTo @route="about" class="button">About</LinkTo>
165-
</div>
170+
<address>
171+
Super Rentals HQ
172+
<p>
173+
1212 Test Address Avenue<br>
174+
Testington, OR 97233
175+
</p>
176+
<a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
177+
<a href="mailto:[email protected]">[email protected]</a>
178+
</address>
179+
<LinkTo @route="about" class="button">About</LinkTo>
180+
</div>
181+
</template>
166182
```
167183

168184
There is quite a bit going on here, so let's break it down.
169185

170-
`<LinkTo>` is an example of a _[component](../../../components/introducing-components/)_ in Ember—you can tell them apart from regular HTML tags because they start with an uppercase letter. Along with regular HTML tags, components are a key building block that we can use to build up an app's user interface.
186+
`<LinkTo>` is an example of a _[component](../../../components/introducing-components/)_ in Ember. Along with regular HTML tags, components are a key building block that we can use to build up an app's user interface. Unlike regular HTML tags, components need to be imported before they can be used. In this case, `<LinkTo>` is imported from the `@ember/routing` package that is part of Ember.
171187

172188
We have a lot more to say about components later, but for now, you can think of them as a way to provide _custom tags_ to supplement the built-in ones that came with the browser.
173189

0 commit comments

Comments
 (0)