Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(steps/09/README.md): Apply improvements by UA #102

Merged
merged 1 commit into from
Jan 16, 2025
Merged

docs(steps/09/README.md): Apply improvements by UA #102

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions steps/09/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,19 +115,17 @@ export default class AppController extends Controller {

#### webapp/index.ts

We'll replace the view with a UI component we've just created. To do this, we use a control called `ComponentContainer`. This control allows us to wrap a UI Component and place it in our HTML document.
We'll replace the view with a UI component. To do this, we use a control called `ComponentContainer`. This control allows us to wrap a UI Component and place it in our HTML document. We configure this instance by providing the following options:

We take out the creation of the view and create a new `ComponentContainer` instead. We configure this instance by providing the following options:

- We assign the `id` property to "container" so that we can refer to it later if needed.
- We assign the `id` property to `"container"` so that we can refer to it later if needed.

- We set the `name` property to the namespace of the component. This tells the `ComponentContainer` control which UI component it should load and show.

- We pass the `id` "walkthrough" to our component through the `ComponentContainer` constructor's settings argument. This `id` helps us identify our component among others that may be created during the application's runtime.
- We pass the `id: "walkthrough"` to our component through the `ComponentContainer` constructor's settings argument. This ID helps us identify our component among others that may be created during the application's runtime.

- To ensure the `id` of our component is unique and avoid any mix-ups, we set the `autoPrefixId` property to "true". This automatically adds a prefix to the ID of the Component, which is the ID of the ComponentContainer followed by a single dash \("-"/).
- To ensure the ID of our component is unique and avoid any mix-ups, we set the `autoPrefixId` property to `true`. This automatically adds a prefix to the ID of the Component, which is the ID of the ComponentContainer followed by a single dash ("`-`").

- For better loading performance, we set the `async` property to "true". This allows the component and its dependencies to load in the background without blocking other parts of the application.
- For better loading performance, we set the `async` property to `true`. This allows the component and its dependencies to load in the background without blocking other parts of the application.

Finally, we position our newly created ComponentController control within the HTML element with the id `content`.

Expand Down
Loading