이것은 이미 저장소에 포함되어 있었지만 스크립트를 확인하기 위해 업데이트되었습니다.
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:[YOUR PORT]/로 이동합니다. Gopher를 클릭하면... 음, 너무 빨리 일어나서 눈치채지 못했을 것입니다. 괜찮습니다. 개발자 도구를 열고 검사기 탭으로 이동합니다. 고퍼를 다시 클릭하세요. 검사기 탭의 HTML에서 업데이트를 확인해야 합니다.
이것이 HTMX의 기본입니다. 이것이 바로 우리가 찾고 있는 반응형 UI/UX를 제공하는 것입니다. 이제 hx-swap은 이름은 간단하지만 위치에 대한 세심한 고려가 필요합니다. 즉, 다른 요소를 방해할 수 있는 곳에 두지 말라는 뜻입니다.
예:
// container // end actor모든 컨트롤을 버튼에 배치하면 모든 내용이 지워지고 업데이트용 버튼이 표시되지 않습니다. 그러나 일부 작업을 컨테이너로 옮기면:
// container// end actor 이제 버튼을 클릭하면 컨테이너 내부의 데이터만 변경됩니다. 단, 이제 추가 편집을 위한 버튼이 존재합니다.
부록
저는 두 가지 이유로 여기서 들릅니다.
첫째, htmx를 사용하여 사이트를 그대로 사용자 정의할 수 있습니다. 둘째, http.Reponse를 사용하여 HTML 코드를 반환할 수 있습니다. 확장하면 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"}}
"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.GO에 HTMX 추가
2024-11-07에 게시됨검색:174
HTMX는 API를 작성할 필요 없이 HTTP 명령으로 HTML을 확장하는 데 사용되는 intercooler.js의 후속 버전입니다. 이제 처음에는 추상화 계층을 제거한다고 말했지만 저는 시스템/도구 프로그래머에 더 가깝기 때문에 그 아래에서 실제로 무슨 일이 일어나고 있는지 이해할 때까지 여전히 추상화가 필요합니다.
기본 사상
HTMX는 AJAX 명령을 배포하여 요소를 수정합니다. 이는 ReactJs의 작동 방식과 유사합니다. ReactJs는 콘텐츠 업데이트를 허용하고 HTMX는 HTML에 대해 이를 충족합니다.
HTMX 가져오기
./internal/views/layout.templ
요소에 간단한 하나의 라이너가 추가되었습니다.이것은 이미 저장소에 포함되어 있었지만 스크립트를 확인하기 위해 업데이트되었습니다.
HTMX 사용
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:[YOUR PORT]/로 이동합니다. Gopher를 클릭하면... 음, 너무 빨리 일어나서 눈치채지 못했을 것입니다. 괜찮습니다. 개발자 도구를 열고 검사기 탭으로 이동합니다. 고퍼를 다시 클릭하세요. 검사기 탭의 HTML에서 업데이트를 확인해야 합니다.
HX-스왑
이것이 HTMX의 기본입니다. 이것이 바로 우리가 찾고 있는 반응형 UI/UX를 제공하는 것입니다. 이제 hx-swap은 이름은 간단하지만 위치에 대한 세심한 고려가 필요합니다. 즉, 다른 요소를 방해할 수 있는 곳에 두지 말라는 뜻입니다.
예:// container // end actor// end-container모든 컨트롤을 버튼에 배치하면 모든 내용이 지워지고 업데이트용 버튼이 표시되지 않습니다. 그러나 일부 작업을 컨테이너로 옮기면:
// container// end-container// end actor 이제 버튼을 클릭하면 컨테이너 내부의 데이터만 변경됩니다. 단, 이제 추가 편집을 위한 버튼이 존재합니다.
부록
저는 두 가지 이유로 여기서 들릅니다.
첫째, htmx를 사용하여 사이트를 그대로 사용자 정의할 수 있습니다. 둘째, http.Reponse를 사용하여 HTML 코드를 반환할 수 있습니다. 확장하면 templ 구성 요소도 전달할 수 있습니다. 이게 어디로 가는지 아시나요?출시 예정
전체 재구성 및 기능을 go handlerFunc()으로 이동합니다.
릴리스 선언문 이 글은 https://dev.to/caffeineordeath/adding-htmx-to-go-2cah?1에서 복제됩니다.1 침해 내용이 있는 경우, [email protected]으로 연락하여 삭제하시기 바랍니다.최신 튜토리얼 더>
형식화된 문자열에서 날짜를 구성할 때 Internet Explorer의 NaN 오류를 해결하는 방법은 무엇입니까?Internet Explorer의 날짜 구성에서 NaN 문제 해결웹 개발에서 JavaScript 날짜 생성자를 사용하여 날짜를 구성하면 특정 브라우저에서 문제가 발생할 수 있습니다. . 특히 Internet Explorer(IE)에서 개발자는 결과가 유효한 날짜 개체가...프로그램 작성 2024-11-07에 게시됨중국어 공부
- 1 "걷다"를 중국어로 어떻게 말하나요? 走路 중국어 발음, 走路 중국어 학습
- 2 "비행기를 타다"를 중국어로 어떻게 말하나요? 坐飞机 중국어 발음, 坐飞机 중국어 학습
- 3 "기차를 타다"를 중국어로 어떻게 말하나요? 坐火车 중국어 발음, 坐火车 중국어 학습
- 4 "버스를 타다"를 중국어로 어떻게 말하나요? 坐车 중국어 발음, 坐车 중국어 학습
- 5 운전을 중국어로 어떻게 말하나요? 开车 중국어 발음, 开车 중국어 학습
- 6 수영을 중국어로 뭐라고 하나요? 游泳 중국어 발음, 游泳 중국어 학습
- 7 자전거를 타다 중국어로 뭐라고 하나요? 骑自行车 중국어 발음, 骑自行车 중국어 학습
- 8 중국어로 안녕하세요를 어떻게 말해요? 你好중국어 발음, 你好중국어 학습
- 9 감사합니다를 중국어로 어떻게 말하나요? 谢谢중국어 발음, 谢谢중국어 학습
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.
Copyright© 2022 湘ICP备2022001581号-3
![\\\"Adding](\\\"/uploads/20241005/17281148536700f0a57c124.jpg\\\")
