Это уже было включено в репозиторий, однако оно было обновлено для проверки скрипта.
HTMX содержит все ваши любимые ключевые слова, добавленные с помощью hx-.
# General format is hx-[verb]hx-get # HTTP GEThx-post # HTTP POSThx-put # HTTP PUThx-patch # HTTP PATCHhx-delete # HTTP DELETEhx-swap # update content of an elementhx-target # specify element to affecthx-trigger # action that executes function
Есть и другие, однако в этом проекте использованы следующие.
Для простого теста в ./internal/views/comComponents/logo.templ внутри открывающего тега мы добавим hx-get=\\\"/\\\" и hx-trigger=\\\"click \\\".
Откройте терминал и запустите:
templ generatego run ./cmd/server/main.go
Теперь зайдите в браузер и перейдите на localhost:[ВАШ ПОРТ]/. Нажмите на Суслика, и вы увидите… ну, это произошло так быстро, что вы, наверное, не заметили. Это нормально. Откройте инструменты разработчика и перейдите на вкладку «Инспектор». Нажмите на суслика еще раз. Вы должны заметить обновление HTML-кода на вкладке инспектора.
Это основа HTMX. Это то, что дает нам тот адаптивный UI/UX, который мы ищем. Теперь, hx-swap, хотя и прост по названию, требует тщательного рассмотрения его местоположения. Я имею в виду, что не следует размещать его там, где он будет мешать другим элементам.
Пример:
// container // end actorРазмещение всех элементов управления на кнопке приведет к удалению всего и предотвращению отображения кнопки для обновления. Однако, если мы перенесем часть работы в контейнер:
// container// end actor Теперь, когда мы нажимаем кнопку, изменяются только данные ВНУТРИ контейнера, за исключением того, что теперь существует кнопка для дальнейшего редактирования.
Приложение
Я останавливаюсь здесь по двум (2) причинам.
Во-первых, вы можете использовать HTMLX и настроить свой сайт таким, какой он есть. Во-вторых, мы можем вернуть HTML-код с помощью http.Reponse. В расширении мы также можем передавать компоненты templ. Вы видите, к чему это идет?Вскоре
Полная реструктуризация и перенос функциональности в go handlerFunc().
","image":"http://www.luping.net/uploads/20241005/17281148536700f0a57a72a.png","datePublished":"2024-11-07T13:21:30+08:00","dateModified":"2024-11-07T13:21:30+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»Добавление HTMX в GO
Опубликовано 7 ноября 2024 г.Просматривать:676
HTMX является преемником intercooler.js, поскольку используется для расширения HTML с помощью HTTP-команд без необходимости написания API. Я знаю, что вначале я сказал, что удаляю уровни абстракции, однако я больше программист систем/инструментов, поэтому мне все еще нужны некоторые абстракции, пока я не пойму, что на самом деле происходит под ними.
Основная концепция
HTMX использует команды AJAX для изменения элемента. Это похоже на то, как работает ReactJs. ReactJs позволяет обновлять контент, а HTMX выполняет это для HTML.
Импортировать HTML-код
К элементу ./internal/views/layout.templ
добавляется простой один лайнер.Это уже было включено в репозиторий, однако оно было обновлено для проверки скрипта.
Использование HTML-кода
HTMX содержит все ваши любимые ключевые слова, добавленные с помощью hx-.
# General format is hx-[verb] hx-get # HTTP GET hx-post # HTTP POST hx-put # HTTP PUT hx-patch # HTTP PATCH hx-delete # HTTP DELETE hx-swap # update content of an element hx-target # specify element to affect hx-trigger # action that executes functionЕсть и другие, однако в этом проекте использованы следующие.
Для простого теста в ./internal/views/comComponents/logo.templ внутри открывающего тега
мы добавим hx-get="/" и hx-trigger="click ".
Откройте терминал и запустите:
templ generate go run ./cmd/server/main.goТеперь зайдите в браузер и перейдите на localhost:[ВАШ ПОРТ]/. Нажмите на Суслика, и вы увидите… ну, это произошло так быстро, что вы, наверное, не заметили. Это нормально. Откройте инструменты разработчика и перейдите на вкладку «Инспектор». Нажмите на суслика еще раз. Вы должны заметить обновление HTML-кода на вкладке инспектора.
HX-ОБМЕН
Это основа HTMX. Это то, что дает нам тот адаптивный UI/UX, который мы ищем. Теперь, hx-swap, хотя и прост по названию, требует тщательного рассмотрения его местоположения. Я имею в виду, что не следует размещать его там, где он будет мешать другим элементам.
Пример:// container // end actor// end-containerРазмещение всех элементов управления на кнопке приведет к удалению всего и предотвращению отображения кнопки для обновления. Однако, если мы перенесем часть работы в контейнер:
// container// end-container// end actor Теперь, когда мы нажимаем кнопку, изменяются только данные ВНУТРИ контейнера, за исключением того, что теперь существует кнопка для дальнейшего редактирования.
Приложение
Я останавливаюсь здесь по двум (2) причинам.
Во-первых, вы можете использовать HTMLX и настроить свой сайт таким, какой он есть. Во-вторых, мы можем вернуть HTML-код с помощью http.Reponse. В расширении мы также можем передавать компоненты templ. Вы видите, к чему это идет?Вскоре
Полная реструктуризация и перенос функциональности в go handlerFunc().
Заявление о выпуске Эта статья воспроизведена по адресу: https://dev.to/caffeineordeath/adding-htmx-to-go-2cah?1. Если есть какие-либо нарушения, свяжитесь с [email protected], чтобы удалить ее.Последний учебник Более>
День f #daysofMiva Задача по кодированию: связывание JavaScript с HTML-файлом.Привет, ребята. Извините, что поздно опубликовал эту статью, но лучше поздно, чем никогда? В любом случае, давайте углубимся в сегодняшнюю статью. ...программирование Опубликовано 7 ноября 2024 г.Изучайте китайский
- 1 Как сказать «гулять» по-китайски? 走路 Китайское произношение, 走路 Изучение китайского языка
- 2 Как сказать «Сесть на самолет» по-китайски? 坐飞机 Китайское произношение, 坐飞机 Изучение китайского языка
- 3 Как сказать «сесть на поезд» по-китайски? 坐火车 Китайское произношение, 坐火车 Изучение китайского языка
- 4 Как сказать «поехать на автобусе» по-китайски? 坐车 Китайское произношение, 坐车 Изучение китайского языка
- 5 Как сказать «Ездить» по-китайски? 开车 Китайское произношение, 开车 Изучение китайского языка
- 6 Как будет плавание по-китайски? 游泳 Китайское произношение, 游泳 Изучение китайского языка
- 7 Как сказать «кататься на велосипеде» по-китайски? 骑自行车 Китайское произношение, 骑自行车 Изучение китайского языка
- 8 Как поздороваться по-китайски? 你好Китайское произношение, 你好Изучение китайского языка
- 9 Как сказать спасибо по-китайски? 谢谢Китайское произношение, 谢谢Изучение китайского языка
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
Декодирование изображения в формате base64
Китайский Пиньинь
Кодировка Юникод
JS-обфускация, шифрование, сжатие
Инструмент шестнадцатеричного шифрования URL-адресов
Инструмент преобразования кодировки UTF-8
Онлайн-инструменты кодирования и декодирования Ascii
Инструмент шифрования MD5
Онлайн-инструмент для шифрования и дешифрования хеша/хеш-текста
Онлайн-шифрование SHAОтказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.
Copyright© 2022 湘ICP备2022001581号-3
![\\\"Adding](\\\"/uploads/20241005/17281148536700f0a57c124.jpg\\\")
