Add extra info in README about using multiple values in hx-vals

wimdeblauwe · May 5, 2024 · 8692e1e · 8692e1e
1 parent a8b65ab
commit 8692e1e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -303,6 +303,13 @@ will render as:
 
 (Given `user.id` has the value `1234`)
 
+You can use multiple values like this:
+
+```html
+
+<div hx:vals="${ {id: user.id, groupId: group.id } }"></div>
+```
+
 ## Articles
 
 Links to articles and blog posts about this library:

diff --git a/...eleaf/src/test/java/io/github/wimdeblauwe/htmx/spring/boot/thymeleaf/HtmxDialectTest.java b/...eleaf/src/test/java/io/github/wimdeblauwe/htmx/spring/boot/thymeleaf/HtmxDialectTest.java
@@ -127,7 +127,8 @@ void testWithHxVals() throws Exception {
         assertThat(html)
                 .containsPattern("hx-vals-div-boolean.*hx-vals=\"\\{&quot;someBooleanProperty&quot;:true}\"")
                 .containsPattern("hx-vals-div-string.*hx-vals=\"\\{&quot;someStringProperty&quot;:&quot;someString&quot;}\"")
-                .containsPattern("hx-vals-div-number.*hx-vals=\"\\{&quot;someNumberProperty&quot;:12345}\"");
+                .containsPattern("hx-vals-div-number.*hx-vals=\"\\{&quot;someNumberProperty&quot;:12345}\"")
+                .containsPattern("hx-vals-div-multiple.*hx-vals=\"\\{&quot;someBooleanProperty&quot;:true,&quot;someNumberProperty&quot;:12345}\"");
     }
 
     @Test

diff --git a/htmx-spring-boot-thymeleaf/src/test/resources/templates/htmx-dialect.html b/htmx-spring-boot-thymeleaf/src/test/resources/templates/htmx-dialect.html
@@ -10,6 +10,7 @@
 <!--/*@thymesVar id="trueVariable" type="java.lang.Boolean"*/-->
 <!--/*@thymesVar id="falseVariable" type="java.lang.Boolean"*/-->
 <!--/*@thymesVar id="listVariable" type="java.util.List"*/-->
+<!-- @formatter:off -->
 <div id="hx-get-div" hx:get="${trueVariable}?'/foo':'/bar'"></div>
 <div id="hx-post-div" hx:post="${trueVariable}?'/foo':'/bar'"></div>
 <div id="hx-put-div" hx:put="${trueVariable}?'/foo':'/bar'"></div>
@@ -21,10 +22,12 @@
 <div id="hx-vals-div-boolean" hx:vals="${ {someBooleanProperty: trueVariable} }"></div>
 <div id="hx-vals-div-string" hx:vals="${ {someStringProperty: stringVariable} }"></div>
 <div id="hx-vals-div-number" hx:vals="${ {someNumberProperty: numberVariable} }"></div>
+<div id="hx-vals-div-multiple" hx:vals="${ {someBooleanProperty: trueVariable, someNumberProperty: numberVariable} }"></div>
 <div id="hx-swap-div-with-empty-string" hx:swap="${falseVariable}?'afterend':''"></div>
 <div id="hx-swap-div-with-null" hx:swap="${falseVariable}?'afterend':null"></div>
 <div id="hx-swap-div-with-th-with" th:with="sum = ${1+1}" hx:swap="${sum.equals(2)}?'afterend':null"></div>
 <div id="hx-target-div-with-th-each" th:each="number : ${listVariable}" hx:target="${number}"></div>
 <div id="hx-validate-div" hx:validate="${trueVariable}"></div>
+<!-- @formatter:on -->
 </body>
 </html>