# Java Thymeleaf JS绑定JSON实现流程
## 概述
在Java开发中，使用Thymeleaf模板引擎可以将数据以JSON格式传递给前端，并通过JS绑定实现动态渲染页面的效果。本文将对实现步骤进行详细介绍，并提供相应的代码示例。
## 实现步骤
下面是实现"Java Thymeleaf JS绑定JSON"的整体步骤：
| 步骤 | 描述 |
| --- | --- |
|
原创
2023-12-02 08:53:02
195阅读
通过属性值决定是否渲染目标元素, 为否时原位置上变成一个注释节点。代码<body :controller="test"> <script> var vm =
avalon.define({ $id: "test", aaa: "这是被隐藏的内容" toggle: false }) </script> <p...
原创
2022-03-25 10:07:31
57阅读
通过属性值决定是否渲染目标元素, 为否时原位置上变成一个注释节点。代码<body :controller="test"> <script> var vm =
avalon.define({ $id: "test", aaa: "这是被隐藏的内容" toggle: false }) </script> <p...
原创
2021-07-07 09:35:09
167阅读
ms-on* 介绍此绑定为元素添加交互功能，对用户行为作出响应. ms-on-*="xxx"是其使用形式, *代表click, mouseover, touchstart等事件名，只能与小写形式定义， xxx是事件回调本身，可以是方法名，或表达式。默认事件回调的第一个参数是事件对象,并进行标准化处理. 如果你是用ms-on-click
原创
2022-03-25 10:05:13
199阅读
ms-for可以同时循环对象与数组<ul> <li ms-for="el in @aaa">{{el}}</li></ul>小括号里面的变量是随便起的,主要能符合JS变量命名规范就行,当然,也不要与window, this这样变量冲突. <li ms-for="($index, el) in @arr">{{$index...
原创
2022-03-25 10:07:45
61阅读
ms-on* 介绍此绑定为元素添加交互功能，对用户行为作出响应. ms-on-*="xxx"是其使用形式, *代表click, mouseover, touchstart等事件名，只能与小写形式定义， xxx是事件回调本身，可以是方法名，或表达式。默认事件回调的第一个参数是事件对象,并进行标准化处理. 如果你是用ms-on-click="@fn(el, 1)“这样的传参方式，第一个传参被你占用...
原创
2021-07-07 09:35:06
350阅读
ms-for可以同时循环对象与数组<ul> <li ms-for="el in @aaa">{{el}}</li></ul>小括号里面的变量是随便起的,主要能符合JS变量命名规范就行,当然,也不要与window, this这样变量冲突. <li ms-for="($index, el) in @arr">{{$index...
原创
2021-07-07 09:35:07
187阅读
简介avalon 是一款迷你 、 易用 、 高性能 的前端MVVM框架。基于虚拟DOM与属性劫持的 ，拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用。主流MVVM框架性能比较...
原创
2021-07-07 09:36:48
116阅读
属性绑定用于为元素节点添加一组属性, 因此要求属性值为对象或数组形式. 数组最后也会合并成一个对象.然后取此对象的键名为属性名, 键值为属性值为元素添加属性。示例代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title>...
原创
2021-07-07 09:35:13
122阅读
avalon2新引入的指令，只能用于form元素上，用于为表单添加验证功能，它需要与ms-duplex, ms-rules指令一起配合使用。ms-validate的值应该对应一个对象，由于对象比较大，建议写在vm，像下面那样:vm.validate = { onValidateAll: function(reasons){ //返回一个数组，如果长度为零说明没有错 },...
原创
2021-07-07 09:37:41
99阅读
为元素添加:active效果,当元素被点击时添加几个类名, 鼠标弹起后则立即移除 <body ms-controller="test"> <script>
原创
2022-03-25 10:03:34
60阅读
属性绑定用于为元素节点添加一组属性, 因此要求属性值为对象或数组形式. 数组最后也会合并成一个对象.然后取此对象的键名为属性名, 键
原创
2022-03-25 10:03:54
101阅读
CSS绑定用于为元素节点添加一组样式, 因此要求属性值为对象或数组形式. 数组最后也会合并成一个对象.然后取此对象的键名为样
原创
2022-03-25 10:04:06
135阅读
这个指令是用于圈定某个VM的作用域范围(换言之,这个元素的outerHTML会被扫描编译,所有ms-*及双花括号替换成vm中的内容),ms-important的属性值只能是某个VM的$id。ms-important的元素节点下面的其他节点也可以使用ms-contr
原创
2022-03-25 10:04:21
160阅读
ms-contoller介绍ms-contoller这个指令是用于圈定某个VM的作用域范围(换言之,这个元素的outerHTML会被扫描编译,所有ms-*及双花括号替换成vm中的内容),ms-controller的属性值只能是某个VM的$id注意：ms-controller的元素节点下面的其他节点也可以使用ms-controller每个VM的$id可以在页面上出现一次, 因此不要在ms-...
原创
2022-03-25 10:08:08
189阅读
CSS绑定用于为元素节点添加一组样式, 因此要求属性值为对象或数组形式. 数组最后也会合并成一个对象.然后取此对象的键名为样式名, 键值为样式值为元素添加样式示例代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title>...
原创
2021-07-07 09:35:13
178阅读
这个指令是用于圈定某个VM的作用域范围(换言之,这个元素的outerHTML会被扫描编译,所有ms-*及双花括号替换成vm中的内容),ms-important的属性值只能是某个VM的$id。ms-important的元素节点下面的其他节点也可以使用ms-controller或ms-important。与ms-controller不一同的是,当某个属性在ms-important的VM找不到时,就...
原创
2021-07-07 09:35:15
221阅读
ms-contoller介绍ms-contoller这个指令是用于圈定某个VM的作用域范围(换言之,这个元素的outerHTML会被扫描编译,所有ms-*及双花括号替换成vm中的内容),ms-controller的属性值只能是某个VM的$id注意：ms-controller的元素节点下面的其他节点也可以使用ms-controller每个VM的$id可以在页面上出现一次, 因此不要在ms-...
原创
2021-07-07 09:35:16
135阅读
ms-effect拥有这三种
绑定形式:<p ms-effect="[@configObj,{is:'fade'}">属性值为字面量,其中一个对象必须包括is属性,这用于指定特效名</p><p ms-effect="{is:fade, stagger:300}">属性值为对象字面量, 里面拥有is属性</p><p ms-effect="@f...
原创
2021-07-07 09:37:40
75阅读
avalon2新引入的指令，只能用于form元素上，用于为表单添加验证功能，它需要与ms-duplex, ms-rules指令一起配合使用。ms-validate的值应该对应一个对象，由于对象比较大，建议写在vm，像下面那样:vm.validate = { onValidateAll: function(reasons){
原创
2022-03-25 10:03:44
79阅读
