Как изменить переменные в Fiber template без нового рендера страницы

Question

Пусть есть базовый HTMl-файл. Допустим, что я хочу загрузить разные картинки на страницу в зависимости от переменной TITLE.

<!DOCTYPE html>
<script defer src="./staticJS"></script>
<body>
    <h1>{{.Title}}</h1>
{{ if .Title == "Picture1" }}
<img src="1.jpg">
{{ end }}
{{ if .Title == "Picture2" }}
<img src="2.jpg">
{{ end }}
    <button onclick="" >
        How to change title here onclick?
    </button>
</body>
</html>

Приложение - стандартное

func CreateWebApp() {

    engine := html.New("./fiber_templates/views", ".html")
    app := fiber.New(fiber.Config{
        Views: engine,
    })
    app.Static("/staticJS", "./fiber_templates/views/main.js")
    app.Static("/1.jpg", "./fiber_templates/views/1.jpg")
    app.Static("/2.jpg", "./fiber_templates/views/2.jpg")
    app.Get("/", func(c *fiber.Ctx) error {
        // Render index template
        return c.Render("index", fiber.Map{
            "Title": "Picture1",
        })
    })

    log.Fatal(app.Listen(":3000"))
}

Как задать возможность изменения переменной внутри html-страницы в зависимости от внутренних сигналов (button.onclick в данном случае)?

Answer 1

Чтобы изменять переменную внутри HTML-страницы в зависимости от внутренних сигналов, вам нужно использовать JavaScript. Вы можете назначить функцию на onclick событие кнопки, которая будет менять значение переменной и обновлять содержимое страницы с помощью DOM-манипуляций. Например, следующий код в main.js будет изменять заголовок и картинку при нажатии кнопки:

const button = document.querySelector('button');
button.addEventListener('click', () => {
    const title = document.querySelector('h1');
    const image = document.querySelector('img');
    if (title.innerText === "Picture1") {
        title.innerText = "Picture2";
        image.src = "/2.jpg";
    } else {
        title.innerText = "Picture1";
        image.src = "/1.jpg";
    }
});

Важно отметить, что в данном случае изменение переменной происходит только на клиентской стороне, а не на серверной стороне, и при обновлении страницы значение переменной будет возвращаться к исходному.

Если вам нужно изменить значение переменной на серверной стороне, то вам необходимо использовать комбинацию JavaScript и AJAX-запросов к серверу. При нажатии кнопки, JavaScript может отправить AJAX-запрос на сервер с измененным значением переменной, а сервер, получив запрос, может обновить значение переменной и вернуть новое содержимое страницы для отображения на клиентской стороне. Например, вы можете использовать JavaScript для отправки POST-запроса на сервер при нажатии кнопки, и на сервере обработать этот запрос, обновив значение переменной и отправив новое содержимое страницы в ответ.

БЛОГ НА HUSL

Как изменить переменные в Fiber template без нового рендера страницы

Ответы (1 шт):