` to be `superuser` if the `@isAdmin` variable
-is true, but `standard` if the `@isAdmin` variable is false.
-
-We could accomplish this requirement by using the `if` helper inside of an attribute:
+Ember's basic primitive for interacting with the DOM is called a `modifier`. You invoke a modifier inside curlies directly on an HTML Element (or Component):
```gjs
-
```
-Instead of thinking about changing the class imperatively when the `@isAdmin` variable changes, we
-can think about how to build a template that produces the right output in both cases, and leave it
-up to Ember to figure out how to update the HTML output.
-
-## Summary: The Principle of Substitution
-
-In summary, when you're trying to update a piece of text or an attribute in your component, think
-of the Principle of Substitution, and write a template that produces the right HTML when you
-substitute all of the variables in the template with the current values of the variables.
-
-Whenever any of those variables change, Ember will automatically update the HTML efficiently without
-blowing away browser state unnecessarily.
-
-The advantage to writing components this way is that there is no way to make a mistake and forget to
-update the output correctly in some situations. As long as the template produces the right HTML for
-its inputs, the output will remain up to date.
-
-This approach works great when you're trying to produce output that can be represented in HTML. But
-what about aspects of your component that aren't represented in HTML, like event handlers? In those
-cases, Ember tries to stick to the spirit of the Principle of Substitution, and allow you to write
-templates as if they only ran one time, and then automatically keep the output up to date for you.
-
-The rest of this guide describes how to enhance your templates with event handlers, custom DOM
-properties and other kinds of custom JavaScript.
-
## Event Handlers
If you want to add an event handler to an HTML element, you can use the `{{on` element modifier.
@@ -319,7 +169,7 @@ Now add the functionality to focus the element:
```js {data-filename="app/modifiers/autofocus.js"}
import { modifier } from "ember-modifier";
-export default modifier(element => element.focus());
+export default modifier((element) => element.focus());
```
And that's it! Now we can import and use our custom `{{autofocus}}` modifier throughout our application.
@@ -485,7 +335,7 @@ Let's start with the DOM structure of a super-simple component that would remove
We don't want to use `{{on "click"}}` here because we want the opposite behavior: do something whenever the user clicks _outside_ of the `
`. To accomplish that, we'll register a `click` handler on the entire document and then hit-test it, looking something like this:
```js
-document.addEventListener("click", event => {
+document.addEventListener("click", (event) => {
if (!element.contains(event.target)) {
// do something
}
@@ -494,7 +344,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 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 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.
Generate the new modifier:
diff --git a/guides/release/pages.yml b/guides/release/pages.yml
index 1601039df8..6c1b917db1 100644
--- a/guides/release/pages.yml
+++ b/guides/release/pages.yml
@@ -82,7 +82,7 @@
url: "component-state-and-actions"
- title: "Looping Through Lists"
url: "looping-through-lists"
- - title: Template Lifecycle, DOM, and Modifiers
+ - title: Manipulating DOM with Modifiers
url: template-lifecycle-dom-and-modifiers
- title: "Built-in Components"
url: "built-in-components"
-