diff --git a/guides/release/getting-started/quick-start.md b/guides/release/getting-started/quick-start.md index 424988a971..aa6fc3c897 100644 --- a/guides/release/getting-started/quick-start.md +++ b/guides/release/getting-started/quick-start.md @@ -87,8 +87,6 @@ Congratulations! You just created and booted your first Ember app. ## Write some HTML in a template - - We will start by editing the `application` template. This template is always on screen while the user has your application loaded. In your editor, open `app/templates/application.gjs` and change it to the following: @@ -99,21 +97,6 @@ In your editor, open `app/templates/application.gjs` and change it to the follow {{outlet}} ``` - - - - -We will start by editing the `application` template. -This template is always on screen while the user has your application loaded. -In your editor, open `app/templates/application.hbs` and change it to the following: - -```handlebars {data-filename=app/templates/application.hbs} -

PeopleTracker

- -{{outlet}} -``` - - Ember detects the changed file and automatically reloads the page for you in the background. You should see that the welcome page has been replaced by "PeopleTracker". @@ -135,18 +118,6 @@ ember generate route scientists You'll see output like this: - -```text -installing route - create app/routes/scientists.js - create app/templates/scientists.hbs -updating router - add route scientists -installing route-test - create tests/unit/routes/scientists-test.js -``` - - ```bash # 🚧 Under construction 🚧 # `ember generate route` has not been updated to produce GJS files yet. @@ -158,7 +129,6 @@ updating router installing route-test create tests/unit/routes/scientists-test.js ``` - That is Ember telling you that it has created: @@ -167,19 +137,6 @@ That is Ember telling you that it has created: 3. An entry in the application's router (located in `app/router.js`). 4. A unit test for this route. - -Open the newly-created template in `app/templates/scientists.hbs` and add the following HTML: - -```handlebars {data-filename=app/templates/scientists.hbs} -{{page-title "Scientists"}} -

List of Scientists

-``` - -In your browser, open [`http://localhost:4200/scientists`](http://localhost:4200/scientists). -You should see the `

` we put in the `scientists.hbs` template right below the `

` from our `application.hbs` template. - - - Open the newly-created template in `app/templates/scientists.gjs` and add the following HTML: ```gjs {data-filename=app/templates/scientists.gjs} @@ -194,8 +151,6 @@ import { pageTitle } from 'ember-page-title'; In your browser, open [`http://localhost:4200/scientists`](http://localhost:4200/scientists). You should see the `

` we put in the `scientists.gjs` template right below the `

` from our `application.gjs` template. - - Since the scientist route is nested under the application route, Ember will render its content inside the application route template's `{{outlet}}` directive. Now that we've got the `scientists` template rendering, @@ -225,19 +180,6 @@ the `model()` method supports any library that uses [JavaScript Promises](https: Now let's tell Ember how to turn that array of strings into HTML. Open the `scientists` template and add the following code to loop through the array and print it: - -```handlebars {data-filename="app/templates/scientists.hbs"} -

List of Scientists

- -
    - {{#each @model as |scientist|}} -
  • {{scientist}}
    • - {{/each}} -
-``` - - - ```gjs {data-filename="app/templates/scientists.gjs"} import { pageTitle } from 'ember-page-title'; @@ -251,7 +193,6 @@ import { pageTitle } from 'ember-page-title'; ``` - Here, we use the `each` _helper_ to loop over each item in the array we provided from the `model()` hook. Ember will render the _block_ contained @@ -275,29 +216,10 @@ As usual, there's a generator that makes this easy for us. Make a new component by typing: ```bash - # 🚧 Under construction 🚧 # `ember generate component` has not been updated to produce GJS files yet. - -ember generate component people-list -``` - - -Copy and paste the `scientists` template into the `PeopleList` component's template and edit it to look as follows: - -```handlebars {data-filename=app/components/people-list.hbs} -

{{@title}}

- -
    - {{#each @people as |person|}} -
  • {{person}}
    • - {{/each}} -
``` - - - Copy and paste this part of the `scientists` template into the `PeopleList` component and edit it to look as follows: ```gjs {data-filename=app/components/people-list.gjs} @@ -312,8 +234,6 @@ Copy and paste this part of the `scientists` template into the `PeopleList` comp ``` - - Note that we've changed the title from a hard-coded string ("List of Scientists") to `{{@title}}`. The `@` indicates that `@title` is an argument that will be passed into the component, which makes it easier to reuse the same component in @@ -322,24 +242,6 @@ other parts of the app we are building. We've also renamed `scientist` to the more-generic `person`, decreasing the coupling of our component to where it's used. - -Our component is called `PeopleList`, based on its name on the file system. Please note that the letters P and L are capitalized. - -
-
-
-
Zoey says...
-
- A component's name is derived from its file name. - We capitalize the first letter and every letter after -, then remove the hyphens. - This is known as pascal case. -
-
- -
-
- - Save this template and switch back to the `scientists` template. We're going to tell our component: @@ -354,23 +256,6 @@ In the rest of the code examples in this tutorial, whenever we add or remove cod Let's replace all our old code with our new componentized version: - -```handlebars {data-filename="app/templates/scientists.hbs" data-diff="-1,-2,-3,-4,-5,-6,-7,+8,+9,+10,+11"} -

List of Scientists

- -
    - {{#each @model as |scientist|}} -
  • {{scientist}}
    • - {{/each}} -
- -``` - - - ```gjs {data-filename="app/templates/scientists.gjs" data-diff="+2,-6,-7,-8,-9,-10,-11,+12,+13,+14,+15"} import { pageTitle } from 'ember-page-title'; import PeopleList from '../components/people-list'; @@ -389,7 +274,6 @@ import PeopleList from '../components/people-list'; /> ``` - Go back to your browser and you should see that the UI looks identical. The only difference is that now we've componentized our list into a version that's more reusable and more maintainable. @@ -407,20 +291,6 @@ user actions like clicks or hovers. Ember makes this easy to do. First, we can modify the `PeopleList` component to include a button: - -```handlebars {data-filename="app/components/people-list.hbs"} -

{{@title}}

- -
    - {{#each @people as |person|}} -
  • - -
    • - {{/each}} -
-``` - - ```gjs {data-filename="app/components/people-list.gjs"} ``` - - Now that we have a button, we need to wire it up to do _something_ when a user clicks on it. For simplicity, let's say we want to show an `alert` dialog with @@ -446,79 +314,6 @@ inputs as arguments and renders them using a template. To introduce _behavior_ to our component – handling the button click in this case, we will need to attach some JavaScript to the component. - -In addition to the template, a component can also have a JavaScript file for -this exact purpose. Go ahead and create a `.js` file with the same name and in -the same directory as our template (`app/components/people-list.js`), -and paste in the following content: - -```javascript {data-filename="app/components/people-list.js"} -import Component from '@glimmer/component'; -import { action } from '@ember/object'; - -export default class PeopleListComponent extends Component { - @action - showPerson(person) { - alert(`The person's name is ${person}!`); - } -} -``` - -_Note: If you want this file created for you, you may pass the `-gc` flag when running the component generator._ - -Here, we created a basic component class and added a method that accepts a -person as an argument and brings up an alert dialog with their name. The -`@action` _decorator_ indicates we want to use this method as an _action_ -in our template, in response to user interaction. - -Now that we have implemented the desired behavior, we can go back to -the component's template and wire everything up: - -```handlebars {data-filename="app/components/people-list.hbs" data-diff="-6,+7"} -

{{@title}}

- -
    - {{#each @people as |person|}} -
  • - - -
    • - {{/each}} -
-``` - -Here, we used the `on` _modifier_ to attach the `this.showPerson` action to -the button in the template. - -There is a problem with this though – if you tried this in the browser, you -will quickly discover that clicking on the buttons will bring up an alert -dialog that said "The person's name is `[Object MouseEvent]`!" – eek! - -The cause of this bug is that we wrote our action to take an argument – the -person's name – and we forgot to pass it. The fix is easy enough: - -```handlebars {data-filename="app/components/people-list.hbs" data-diff="-6,+7"} -

{{@title}}

- -
    - {{#each @people as |person|}} -
  • - - -
    • - {{/each}} -
-``` - -Instead of passing the action to the `on` modifier directly, we used the `fn` -helper to pass the `person` as an argument which our action expects. - -Feel free to try this in the browser. Finally, everything should behave exactly -as we hoped! - - - - Let's use the [`on` modifier](../../components/template-lifecycle-dom-and-modifiers/#toc_event-handlers) to handle click events on the button: ```gjs {data-filename="app/components/people-list.gjs"} @@ -600,11 +395,6 @@ export default class extends Component { } ``` - - - - - ## Building For Production Now that we've written our application and verified that it works in development,