You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This code example uses a feature of JavaScript called classes.
175
-
Learn more with this [overview of the latest JavaScript features](https://ponyfoo.com/articles/es6).
175
+
Learn more with this [overview of the latest JavaScript features](https://web.dev/series/baseline-newly-available).
176
176
177
177
In a route's `model()` method, you return whatever data you want to make available to the template.
178
178
If you need to fetch data asynchronously,
@@ -266,7 +266,7 @@ We're going to tell our component:
266
266
267
267
We'll need to make some changes to the code we wrote before.
268
268
269
-
In the rest of the code examples in this tutorial, whenever we add or remove code, we will show a "diff." The lines you need to remove have a minus sign in front of them, and the lines you should add have a plus sign. If you are using a screen reader while you go through the Guides, we recommend using Firefox and NVDA or Safari and VoiceOver for the best experience.
269
+
In the rest of the code examples in this tutorial, whenever we add or remove code, we will show a "diff." The lines you need to remove will be highlighted in red, and the lines you should add will be highlighted in green. If you are using a screen reader while you go through the Guides, we recommend using Firefox and NVDA or Safari and VoiceOver for the best experience.
270
270
271
271
Let's replace all our old code with our new componentized version:
272
272
@@ -458,7 +458,7 @@ First you need to [sign up for a Netlify account](https://app.netlify.com/signup
458
458
459
459
**Configuring Netlify URL handling**
460
460
461
-
The next step is to let the web app server know how to handle URLs. There are 2 ways to do so.
461
+
The next step is to let the web app server know how to handle URLs. There are two ways to do so.
462
462
463
463
One, you can create a file in your `ember-quickstart/public` folder called
464
464
`_redirects`. Add `/* /index.html 200` to the first line and save the file.
@@ -474,53 +474,53 @@ Now you are ready to deploy your app to production on Netlify platform. There ar
474
474
475
475
**Deploying to Netlify using drag and drop**
476
476
477
-
You may need to re-create your `dist` directory to include changes made to `_redirects` file by running this command
477
+
You may need to re-create your `dist` directory to include changes made to `_redirects` file by running this command:
478
478
479
479
```bash
480
480
npm run build
481
481
```
482
482
483
-
Once you are logged-in to your Netlify account and in the "Sites" section, you should see the Netlify drag and drop area
483
+
Once you are logged-in to your Netlify account and in the "Sites" section, you should see the Netlify drag and drop area:
484
484
485
485

486
486
487
-
Next, locate your `dist` folder on your local machine and drag and drop it into this area
487
+
Next, locate your `dist` folder on your local machine and drag and drop it into this area.
488
488
489
-
When your files have been successfully uploaded, you should see the status of your deployment in the "Getting started" section
489
+
When your files have been successfully uploaded, you should see the status of your deployment in the "Getting started" section:
490
490
491
491

492
492
493
-
Once you see "Your site is deployed" as shown above, your website is now live and you can click on the link provided above the "Getting started" section to view your site
493
+
Once you see "Your site is deployed" as shown above, your website is now live and you can click on the link provided above the "Getting started" section to view your site:
494
494
495
495

496
496
497
497
Congratulations! Your site is now live and in production!
498
498
499
499
**Deploying to Netlify using Git (specifically GitHub)**
500
500
501
-
Make sure you are logged-in to your Netlify account and in the "Sites" section
501
+
Make sure you are logged-in to your Netlify account and in the "Sites" section.
Click the "GitHub" button under "Continuous Deployment" to connect to your GitHub account. Please note you will be taken to a series of GitHub login screens and asked to select your GitHub preferences related to Netlify
507
+
Click the "GitHub" button under "Continuous Deployment" to connect to your GitHub account. Please note you will be taken to a series of GitHub login screens and asked to select your GitHub preferences related to Netlify:
508
508
509
509

510
510
511
-
Once you have successfully connected your GitHub account with Netlify, you should see a list of repositories to choose from. Select or search for your GitHub repository that you wish to deploy
511
+
Once you have successfully connected your GitHub account with Netlify, you should see a list of repositories to choose from. Select or search for your GitHub repository that you wish to deploy:
512
512
513
513

514
514
515
-
If you have successfully selected your repo and it is an Ember application, Netlify will automatically generate the deploy settings as shown below. These instructions assume you do not want to change any of the default settings generated by Netlify. So if everything looks good to you, go ahead and click the "Deploy site" button
515
+
If you have successfully selected your repo and it is an Ember application, Netlify will automatically generate the deploy settings as shown below. These instructions assume you do not want to change any of the default settings generated by Netlify. So if everything looks good to you, go ahead and click the "Deploy site" button:
Once you see "Your site is deployed" as shown above, your website is now live and you can click on the link provided above the "Getting started" section to view your site
523
+
Once you see "Your site is deployed" as shown above, your website is now live and you can click on the link provided above the "Getting started" section to view your site:
524
524
525
525

import ENV from 'super-rentals/config/environment';
410
410
@@ -447,7 +447,7 @@ Note that we did not mark our getter as `@tracked`. Unlike instance variables, g
447
447
448
448
That being said, the values _produced_ by getters can certainly change. In our case, the value produced by our `src` getter depends on the values of `lat`, `lng`, `width`, `height` and `zoom` from `this.args`. Whenever these _dependencies_ get updated, we would expect `{{this.src}}` from our template to be updated accordingly.
449
449
450
-
Ember does this by automatically tracking any variables that were accessed while computing a getter's value. As long as the dependencies themselves are marked as `@tracked`, Ember knows exactly when to invalidate and re-render any templates that may potentially contain any "stale" and outdated getter values. This feature is also known as _[auto-track](../../../in-depth-topics/autotracking-in-depth/)_. All arguments that can be accessed from `this.args` (in other words, `this.args.*`) are implicitly marked as `@tracked` by the Glimmer component superclass. Since we inherited from that superclass, everything Just Works™.
450
+
Ember does this by automatically tracking any variables that were accessed while computing a getter's value. As long as the dependencies themselves are marked as `@tracked`, Ember knows exactly when to invalidate and re-render any templates that may potentially contain any "stale" and outdated getter values. This feature is also known as _[auto-track](../../../in-depth-topics/autotracking-in-depth/)_. All arguments that can be accessed from `this.args` (in other words, `this.args.*`) are implicitly marked as `@tracked` by the Glimmer component superclass. Since we inherited from that superclass, everything Just Works!
451
451
452
452
## Getting JavaScript Values into the Test Context
Copy file name to clipboardExpand all lines: guides/release/tutorial/part-2/provider-components.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -379,7 +379,7 @@ When we use this syntax, we are passing a block—the `...some content here...`
379
379
380
380
Inside of our block, we need to be able to access the current item _somehow_. The `{{#each}}` syntax provides the item to our block via the `as |item|` declaration, which creates a local variable `item`, also known as a _[block parameter](../../../components/looping-through-lists/)_. In other words, as we iterate through `@items`, we will have access to the current item that we're looping over through the block parameter (`item`) The block parameter is only accessible from within inside of the block. Ember will fill in the block parameter with the current item of the iteration, and it will do this each time that it renders our block.
381
381
382
-
The need to provide some data to a block is not unique to the `{{#each}}` syntax. In this case, our `<Rentals::Filter>` component wants to take the unfiltered list of rental properties and match them against the user's query. Once the component has matched the rentals against the query, it will need to provide a filtered list of rental properties to its caller (the `<Rentals>` component).
382
+
The need to provide some data to a block is not unique to the `{{#each}}` syntax. In this case, our `<RentalsFilter>` component wants to take the unfiltered list of rental properties and match them against the user's query. Once the component has matched the rentals against the query, it will need to provide a filtered list of rental properties to its caller (the `<Rentals>` component).
383
383
384
384
As it turns out, this ability to provide block params is not a superpower that only built-in syntaxes like `{{#each}}` can use. We can do this with our own components as well. In fact, Ember allows us to pass arbitrary data to blocks in the form of passing in additional arguments to the `{{yield}}` keyword. Indeed, this is exactly what we did with `{{yield this.results}}` in the `<RentalsFilter>` component.
Copy file name to clipboardExpand all lines: guides/release/tutorial/part-2/route-params.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -403,7 +403,7 @@ We can use the `beforeEach` hook to share some boilerplate code, which allows us
403
403
404
404
Finally, let's add a `rental` template to actually _invoke_ our `<RentalDetailed>` component, as well as adding an acceptance test for this new behavior in our app.
0 commit comments