From 6592f8affbaaed57da908c39e443a6ecaa7481f4 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli Date: Wed, 13 Jul 2022 10:07:45 -0400 Subject: [PATCH 1/6] wip --- .../template-lifecycle-dom-and-modifiers.md | 31 ++++++++----------- 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/guides/release/components/template-lifecycle-dom-and-modifiers.md b/guides/release/components/template-lifecycle-dom-and-modifiers.md index b8fb711cf4..d2c5945f7b 100644 --- a/guides/release/components/template-lifecycle-dom-and-modifiers.md +++ b/guides/release/components/template-lifecycle-dom-and-modifiers.md @@ -243,7 +243,7 @@ On the other hand, if you're looking at JavaScript documentation that tells you If you want to set a property, you can use the `prop` element modifier. -## Calling Methods On First Render +## Calling Methods On Render So far, we've talked about web APIs that work by setting attributes as well as web APIs that work by setting properties. But what about web APIs that work by calling methods, like setting focus on an element? @@ -253,35 +253,30 @@ For example, let's say we want to focus an `` in a form as soon as the fo inputElement.focus(); ``` -This code needs to run after the element is rendered. - -The simplest way to accomplish this is by using the `did-insert` modifier from [@ember/render-modifiers][render-modifiers]. - -[render-modifiers]: https://github.com/emberjs/ember-render-modifiers +This code needs to run after the element is rendered, and modifiers provided that capability. ```handlebars {app/components/edit-form.hbs}
- +
``` +Here we define a local modifier right on the component class. + ```js {app/components/edit-form.js} import Component from '@glimmer/component'; -import { action } from '@ember/object'; +import { modifier } from 'ember-modifier'; export default class EditFormComponent extends Component { - @action - focus(element) { - element.focus(); - } + autofocus = modifier((element) => element.focus()); } ``` -The `did-insert` modifier will call a function after its element is added to the DOM. That function receives the element as a parameter. +More information about `ember-modifier` can be found [on the README](https://github.com/ember-modifier/ember-modifier) as well as philosophy, how to think about modifiers, etc. -### Abstracting the Logic Into a Custom Modifier +### Abstracting the Logic Into a Shareable Modifier -Using the `did-insert` modifier works well for one-off cases, but if you want to pull this logic into reusable functionality that you can use throughout your app, you can make your _own_ modifier. +Using the local modifier sworks well for one-off cases, but if you want to pull this logic into reusable functionality that you can use throughout your app, you can move the modifier to a globally accessible place The modifier that we're going to build will allow us to say: @@ -291,9 +286,9 @@ The modifier that we're going to build will allow us to say: ``` -Pretty nice, right? +No need for `this`, or to define anything on your component class. -To accomplish that, we'll create a modifier in `app/modifiers/autofocus.js`. First, install [`ember-modifier`](https://github.com/ember-modifier/ember-modifier) and then generate an `autofocus` modifier for your app: +To accomplish that, we'll create a file at `app/modifiers/autofocus.js`. First, ensure that [`ember-modifier`](https://github.com/ember-modifier/ember-modifier) is installed and then generate an `autofocus` modifier for your app: ```bash ember install ember-modifier @@ -448,7 +443,7 @@ document.addEventListener("click", event => { The most important difference between this example and the cases we've seen so far is that we need to remove the `click` event handler from the document when this element is destroyed. -To accomplish this, we can use [`ember-modifier`](https://github.com/ember-modifier/ember-modifier) to create a `on-click-outside` modifier that sets up the event listener after the element is first inserted and removes the event listener when the element is removed. +To accomplish this, we can use [`ember-modifier`](https://github.com/ember-modifier/ember-modifier) to create a `on-click-outside` modifier that sets up the event listener after the element is first inserted and removes the event listener when the element is removed. Run the following commands to install the addon and generate a new modifier: From e0cb659ae53278f0e1d1b9b97538e5e3a8abf7f0 Mon Sep 17 00:00:00 2001 From: Jen Weber Date: Sat, 23 Jul 2022 10:43:23 -0400 Subject: [PATCH 2/6] Apply suggestions from code review --- .../components/template-lifecycle-dom-and-modifiers.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/guides/release/components/template-lifecycle-dom-and-modifiers.md b/guides/release/components/template-lifecycle-dom-and-modifiers.md index d2c5945f7b..ea0068698a 100644 --- a/guides/release/components/template-lifecycle-dom-and-modifiers.md +++ b/guides/release/components/template-lifecycle-dom-and-modifiers.md @@ -253,7 +253,8 @@ For example, let's say we want to focus an `` in a form as soon as the fo inputElement.focus(); ``` -This code needs to run after the element is rendered, and modifiers provided that capability. +We can use a modifier to run a method immediately after an element has rendered. +In this example, we add an `autofocus` method to the component class, and use it in a template: ```handlebars {app/components/edit-form.hbs}
@@ -272,11 +273,11 @@ export default class EditFormComponent extends Component { } ``` -More information about `ember-modifier` can be found [on the README](https://github.com/ember-modifier/ember-modifier) as well as philosophy, how to think about modifiers, etc. +Modifiers can be used in many other ways! For API documentation and more examples, visit the [the `ember-modifier` README](https://github.com/ember-modifier/ember-modifier). ### Abstracting the Logic Into a Shareable Modifier -Using the local modifier sworks well for one-off cases, but if you want to pull this logic into reusable functionality that you can use throughout your app, you can move the modifier to a globally accessible place +Writing a modifier in a component class works well for one-time use cases, but if you want to reuse the modifier in other places within your app, you can move the modifier to a globally accessible place. The modifier that we're going to build will allow us to say: From a9ed3e6cbef56d002ddc11f6fd6fae1895bb633b Mon Sep 17 00:00:00 2001 From: Jen Weber Date: Sat, 23 Jul 2022 10:48:33 -0400 Subject: [PATCH 3/6] Rearrange order --- .../template-lifecycle-dom-and-modifiers.md | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/guides/release/components/template-lifecycle-dom-and-modifiers.md b/guides/release/components/template-lifecycle-dom-and-modifiers.md index ea0068698a..931cfd636a 100644 --- a/guides/release/components/template-lifecycle-dom-and-modifiers.md +++ b/guides/release/components/template-lifecycle-dom-and-modifiers.md @@ -245,7 +245,7 @@ If you want to set a property, you can use the `prop` element modifier. ## Calling Methods On Render -So far, we've talked about web APIs that work by setting attributes as well as web APIs that work by setting properties. But what about web APIs that work by calling methods, like setting focus on an element? +So far, we've talked about web APIs that work by setting attributes as well as web APIs that work by setting properties. But what about web APIs that work by calling methods, like setting focus on an element? For example, let's say we want to focus an `` in a form as soon as the form is rendered. The web API for focusing an element is: @@ -254,15 +254,9 @@ inputElement.focus(); ``` We can use a modifier to run a method immediately after an element has rendered. -In this example, we add an `autofocus` method to the component class, and use it in a template: - -```handlebars {app/components/edit-form.hbs} - - - -``` - -Here we define a local modifier right on the component class. +To follow along with the examples below, make sure you have `ember-modifier` installed in your app. +Import `modifier` from `ember-modfier`, add an `autofocus` method to the component class, +and then use it in a component template. ```js {app/components/edit-form.js} import Component from '@glimmer/component'; @@ -273,6 +267,14 @@ export default class EditFormComponent extends Component { } ``` +Here is how we can use our new modifier in a template: + +```handlebars {app/components/edit-form.hbs} +
+ +
+``` + Modifiers can be used in many other ways! For API documentation and more examples, visit the [the `ember-modifier` README](https://github.com/ember-modifier/ember-modifier). ### Abstracting the Logic Into a Shareable Modifier From 74425844bdfc92566cbf6ec5db497e92ed2c4e91 Mon Sep 17 00:00:00 2001 From: Jen Weber Date: Sat, 23 Jul 2022 10:54:00 -0400 Subject: [PATCH 4/6] Add label to input element --- .../components/template-lifecycle-dom-and-modifiers.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/guides/release/components/template-lifecycle-dom-and-modifiers.md b/guides/release/components/template-lifecycle-dom-and-modifiers.md index 931cfd636a..69384cb6d9 100644 --- a/guides/release/components/template-lifecycle-dom-and-modifiers.md +++ b/guides/release/components/template-lifecycle-dom-and-modifiers.md @@ -271,7 +271,10 @@ Here is how we can use our new modifier in a template: ```handlebars {app/components/edit-form.hbs}
- +