首页thymeleaf在js里怎么处理对象列表

thymeleaf在js里怎么处理对象列表

时间: 2023-06-12 20:02:11 浏览: 133

迭代基础知识-四线风扇数据手册

6.1迭代基础知识要在我们的 /WEB-INF/templates/product/list.html⻚⾯中显⽰产品，我们将使⽤表格。我们的每个产品都会显⽰在⼀⾏（⼀个 <tr>元素），因此对于我们的模板，我们需要创建⼀个模板⾏ - ⼀个可以说明我们希望如何显⽰每个产品的模板⾏ - 然后指⽰ Thymeleaf重复它，每个产品⼀次。标准⽅⾔为我们提供了⼀个属性： th:each。使⽤th：each 对于我们的产品列表⻚⾯，我们需要⼀个控制器⽅法，从服务层检索产品列表并将其添加到模板上下⽂中： public void process( final HttpServletRequest request, final HttpServletResponse response, final ServletContext servletContext, final ITemplateEngine templateEngine) throws Exception { ProductService productService = new ProductService(); List<Product> allProducts = productService.findAll(); WebContext ctx = new WebContext(request, response, servletContext, request.getLocale()); ctx.setVariable("prods", allProducts); templateEngine.process("product/list", ctx, response.getWriter()); } 然后我们将 th:each在我们的模板中使⽤迭代产品列表： <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Good Thymes Virtual Grocery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" media="all" href="../../../css/gtvg.css" th:href="@{/css/gtvg.css}" /> </head> <body> <h1>Product list</h1> <table> <tr> <th>NAME</th> <th>PRICE</th> <th>IN STOCK</th> </tr> <tr th:each="prod : ${prods}"> <td th:text="${prod.name}">Onions</td> <td th:text="${prod.price}">2.41</td> <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>

Thymeleaf无法直接在js中处理对象列表，但可以在服务器端将对象列表转换为JSON格式，然后在js中使用JSON.parse()方法将其转换为js对象，从而实现在js中处理对象列表。另外，Thymeleaf也提供了一些内置函数和指令，如th:attr和th:data，可以方便地将服务器端的数据传递到前端页面。

阅读全文