thymeleaf前端数据绑定_thymeleaf怎么绑定js数据

作者：Gausst松鼠会 | 2024-02-27 14:51:16

踩

thymeleaf怎么绑定js数据

thymeleaf是一种模板，如果想在html对表格进行绑定，可以这么做：

<html xmlns:th="http://www.thymeleaf.org">
<script th:src="@{../pages/js/art-template/art-template.js}"></script>

</html>
1
2
3
4

解释一下，xmlns指定了我们使用thymeleaf模板，然后就可以进行数据绑定，另外，加入的template.js主要是进行列表的绑定，这个.js文件可以到网上下载之后然后放到项目中去。

<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<script th:src="@{../pages/js/art-template/art-template.js}"></script>
<div id="table-box"></div>
<script id="demo_table" type="text/html">
<table>
	<thead>
		<tr>
		<th>name</th>
		<th>gender</th>
		<th>age</th>
		<th>occupation</th>
		<th>zip_code</th>
		</tr>
	</thead>
	<script>
	<tbody>
	{{if $data}}
	{{each $data}}
		<tr>
			<td>{{value.name}}</td>
			<td>{{value.gender}}</td>
			<td>{{value.age}}</td>
			<td>{{value.occupation}}</td>
			<td>{{value.zip_code}}</td>
		</tr>
	{{/each}}
	{{/if}}
	</tbody>
<table>
</script>
<script th:src="@{../pages/js/demo.js}"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

demo.js

function demo(){
	data = {
			"info":[
				{"name":"1","gender":"F","age":18,"occupation":"java IT Projecter","zip_code":100000},
				{"name":"1","gender":"F","age":18,"occupation":"java IT Projecter","zip_code":100000},
				{"name":"1","gender":"F","age":18,"occupation":"java IT Projecter","zip_code":100000},
				{"name":"1","gender":"F","age":18,"occupation":"java IT Projecter","zip_code":100000},
				{"name":"1","gender":"F","age":18,"occupation":"java IT Projecter","zip_code":100000},
				{"name":"1","gender":"F","age":18,"occupation":"java IT Projecter","zip_code":100000},
				{"name":"1","gender":"F","age":18,"occupation":"java IT Projecter","zip_code":100000}
			]
	}
	var html = template('demo_table', data.info);
	document.getElementById('table_box').innerHTML = html;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

是不是很简单。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/153808