请问Nodejs中express模板 如何 生成类似于.net里面repeat 的html结构?

请问Nodejs中express模板 如何 生成类似于.net里面repeat 的html结构?

渲染后像这种: <li></li> <li></li> … … … <li></li>

4 回复

在Node.js的Express框架中，生成类似于.NET中的<asp:Repeater>控件的HTML结构可以通过使用模板引擎（如EJS、Pug或Handlebars）来实现。这些模板引擎允许你在HTML中嵌入JavaScript逻辑，从而动态生成重复的HTML结构。

假设我们使用的是EJS模板引擎，以下是如何实现类似.NET中<asp:Repeater>功能的例子：

示例数据

首先，我们需要一些数据来循环渲染。例如，一个包含多个项目的数组：

const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
];

Express路由

接下来，在Express应用中定义一个路由来渲染视图，并将数据传递给模板：

const express = require('express');
const app = express();
app.set('view engine', 'ejs'); // 设置EJS作为模板引擎

app.get('/', (req, res) => {
    const items = [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
    ];
    res.render('index', { items }); // 将items对象传递给模板
});

app.listen(3000, () => console.log('Server running on port 3000'));

EJS模板

最后，在views/index.ejs文件中编写模板代码以循环渲染项目列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Items List</title>
</head>
<body>
    <ul>
        <% items.forEach(item => { %>
            <li><%= item.name %></li>
        <% }) %>
    </ul>
</body>
</html>

在这个例子中，我们使用了EJS的语法来遍历items数组。<% ... %>标签用于执行JavaScript代码，而<%= ... %>标签用于输出变量的值。

通过这种方式，你可以轻松地在Express应用中生成类似于.NET中<asp:Repeater>的HTML结构。如果你使用其他模板引擎（如Pug或Handlebars），语法会有所不同，但基本概念是一样的。


如果需要后端生成，可以用ejs 如果需要前端双向数据绑定的，可以用knockout.js 我个人比较反对后端模板，因为白白的浪费了CPU和流量，得不到什么特殊的好处，只建议在浏览器很弱，不太支持js的时候用后端模板

use EJS template.

签名: 交流群244728015 《Node.js 服务器框架开发实战》 http://url.cn/Pn07N3

在Node.js中使用Express框架时，你可以通过模板引擎（如EJS、Pug或Handlebars）来生成类似于.NET中的<asp:Repeater>控件的功能。这里以EJS为例，展示如何生成类似的HTML结构。

示例代码

假设你有一个数组items，你想将每个元素渲染为一个列表项<li>：

// 在你的路由处理函数中
app.get('/list', (req, res) => {
    const items = ['Item 1', 'Item 2', 'Item 3'];
    res.render('list', { items });
});

在你的EJS模板文件list.ejs中，你可以这样写：

<ul>
    <% items.forEach(function(item) { %>
        <li><%= item %></li>
    <% }); %>
</ul>

解释

  • items.forEach(function(item) {...}) 是一个遍历数组的方法。
  • <% ... %> 是EJS中的代码块标签，用于包含JavaScript代码。
  • <%= ... %> 是EJS中的输出标签，用于输出变量的值。

其他模板引擎

如果你使用的是Pug（以前称为Jade），语法会略有不同：

ul
  each item in items
    li= item

对于Handlebars，语法如下：

<ul>
  {{#each items}}
    <li>{{this}}</li>
  {{/each}}
</ul>

这些模板引擎提供了灵活的方式来动态生成HTML内容，类似.NET中的<asp:Repeater>控件。

回到顶部