# Updating views

### Update view 1

Below, I will show you some ways you can update view content outside of the view.

```javascript
let stratox = new Stratox("#app");

const itemA = stratox.view("ingress#itemA", {
    headline: "Lorem ipsum dolor 1",
    content: "Lorem ipsum dolor sit amet",
});

const itemB = stratox.view("ingress#itemB", {
    headline: "Lorem ipsum dolor 2",
    content: "Lorem ipsum dolor sit amet",
});

stratox.execute();

const myBtn = document.getElementById("update-headline-btn");
myBtn.addEventListener("click", function (e) {
    e.preventDefault();
    itemA.set({ headline: "Headline 1 been updated!" }).update();
    itemB.set({ headline: "Headline 2 been updated!" }).update();
});
```

#### Result:

{% embed url="<https://codepen.io/wazabii8/pen/gOEgNrW>" %}

#### Update example 1

The above example is utilizing the components item variable to tell Stratox which component you want to update, e.g.:

```javascript
itemA.set({ headline: "Headline 1 been updated!" }).update();
```

There are tho 2 other ways you can also update the component with.

#### Update example 2

Utilize the view component setter again, but with updated values, and trigger the `stratox.update()` function to push changes to the view.

```javascript
stratox.view("ingress", { headline: "Headline been twice!" });
stratox.update();
```

#### Update example 3

Utilize the `stratox.update()` function and set argument 1 to the expected component name and argument 2 to an anonymous function. The anonymous function, in turn, has one expected object argument where you can access the component's data and modify it.

```javascript
stratox.update("ingress", function(obj) {
    obj.data.headline = "Headline updated thrice!";
});
```

### Update view 2

Below, I will show you some ways you can update view content **inside** of the view.

```javascript
export function custom({ props, view })
{
    // Use the bind function to bind the event to click
    const myClickEvent = view.bind((props) => {
        props.headline = 'Headline has been updated!';
    });
    
    /*
    // Manually trigger update
    const myClickEvent = view.bind((props) => {
        props.headline = 'Headline has been updated!';
        view.update();
    }, false);
    */

    return `
    <article>
        <section class="mb-30">
            <h2 class="title">${props.headline}</h2>
            <p>${props.content}</p>
        </section>
        <a class="button" href="#" onclick="${myClickEvent}">Update headline</a>
    <article>
    `;

    return out;
}
```

#### Result:

{% embed url="<https://codepen.io/wazabii8/pen/OJqgLWY>" %}

And that is that. Let's move on on how you can build to some forms


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://stratox.wazabii.se/stratox.js/template-engine/updating-views.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.