Nodejs express.js +html 模板 生成和load之后能否根据传入的locals参数实现动态视图

Nodejs express.js +html 模板 生成和load之后能否根据传入的locals参数实现动态视图

express.js render的模板里 配置如下

 app.configure(function () { 
app.set('view engine', 'html'); 
app.set('views', path.join(__dirname, 'views')); 
app.register('.html', require('ejs')); 
app.use(express.bodyParser({
        uploadDir: config.upload_dir,
        keepExtensions: true,
        limit: 10000000, 
        defer: true //enable event }));

render的函数调用 res.render(‘topic/edit’, {tags: tags, topic_type:‘话题’});

想调用如下函数，显然需要load完成之后才能调用？ 能否/应该如何在html模板中调用下列函数呢？ 为什么用window.onload=dynamicview;调用无效呢？

    function dynamicview() 
{
 if (!locals.topic_type ||locals.topic_type=='话题')
    {
  document.getElementById("needDiv").style.display="none";
 document.getElementById("maxnumber").style.display="compact";
document.getElementById('type_0').checked = true;
    }
    else if(locals.topic_type=='发送')
  {
..............
}

3 回复

当然可以！在Express.js中，通过res.render()传递给模板的locals对象可以在模板中使用。这些变量可以在页面加载时直接用于动态显示内容或修改DOM元素。

示例代码

后端代码（Node.js）

首先，我们需要一个简单的Express应用来渲染HTML模板，并传递一些数据到模板中。

const express = require('express');
const path = require('path');

const app = express();

// 设置视图引擎为HTML，并指定模板目录
app.set('view engine', 'html');
app.set('views', path.join(__dirname, 'views'));

// 注册EJS作为HTML模板处理器
app.engine('html', require('ejs').renderFile);

// 示例路由
app.get('/topic/:id', (req, res) => {
    const id = req.params.id;
    const tags = ['tag1', 'tag2']; // 示例标签数组
    const topic_type = '话题'; // 可以是 '话题' 或 '发送'
    
    // 渲染模板并传递locals对象
    res.render('topic/edit', { id, tags, topic_type });
});

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

前端模板（HTML）

接下来，我们创建一个HTML模板文件topic/edit.html，并在其中使用传递过来的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Topic Edit</title>
</head>
<body>
    <div id="needDiv">这是一个需要根据topic_type显示或隐藏的div</div>
    <div id="maxnumber" style="display:none;">这是另一个可能需要显示或隐藏的div</div>
    <input type="radio" id="type_0" name="type" value="话题" <%= topic_type === '话题' ? 'checked' : '' %> />
    <input type="radio" id="type_1" name="type" value="发送" <%= topic_type === '发送' ? 'checked' : '' %> />

    <script>
        // 动态修改DOM元素的JavaScript代码
        function dynamicView() {
            const topicType = '<%= locals.topic_type %>';
            if (!topicType || topicType === '话题') {
                document.getElementById("needDiv").style.display = "none";
                document.getElementById("maxnumber").style.display = "block";
                document.getElementById('type_0').checked = true;
            } else if (topicType === '发送') {
                // 更改其他DOM元素的样式或状态
                document.getElementById("needDiv").style.display = "block";
                document.getElementById("maxnumber").style.display = "none";
                document.getElementById('type_1').checked = true;
            }
        }

        // 确保DOM加载完成后调用此函数
        document.addEventListener('DOMContentLoaded', dynamicView);
    </script>
</body>
</html>

解释

  1. 后端：

    • 使用app.render()方法将数据传递给模板。
    • locals对象中的数据可以直接在模板中使用。

  2. 前端：

    • 在模板中，你可以直接使用<%= locals.topic_type %>来插入传递过来的数据。
    • JavaScript部分在DOMContentLoaded事件触发后执行，确保DOM已经完全加载。

这样，你就可以根据传递的locals参数动态地改变页面上的内容了。


没人理啊…

在Express.js中，你可以通过传递给res.render()方法的locals参数来向模板传递数据。这些数据可以在模板中直接使用，而不需要依赖于JavaScript的window.onload事件。

示例代码

Express.js 路由器定义

const express = require('express');
const path = require('path');
const ejs = require('ejs');

const app = express();

app.set('view engine', 'html');
app.set('views', path.join(__dirname, 'views'));
app.engine('.html', ejs.__express);

app.get('/topic/edit', (req, res) => {
    const tags = ['tag1', 'tag2'];
    res.render('topic/edit', {
        tags: tags,
        topic_type: '话题'
    });
});

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

HTML 模板（views/topic/edit.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Edit Topic</title>
</head>
<body>
    <div id="needDiv" style="display:block;">
        <!-- Some content here -->
    </div>
    <div id="maxnumber" style="display:none;">
        <!-- Some content here -->
    </div>

    <% if (topic_type === '话题') { %>
    <script>
        document.getElementById("needDiv").style.display="block";
        document.getElementById("maxnumber").style.display="none";
        document.getElementById('type_0').checked = true;
    </script>
    <% } else if (topic_type === '发送') { %>
    <script>
        // 处理其他情况的逻辑
        document.getElementById("needDiv").style.display="none";
        document.getElementById("maxnumber").style.display="block";
        document.getElementById('type_1').checked = true;
    </script>
    <% } %>

    <input type="radio" id="type_0" name="type" value="话题">
    <input type="radio" id="type_1" name="type" value="发送">
</body>
</html>

解释

  1. Express.js 设置：

    • app.set('view engine', 'html') 设置视图引擎为 .html。
    • app.set('views', path.join(__dirname, 'views')) 设置视图目录。
    • app.engine('.html', ejs.__express) 使用 EJS 作为 .html 文件的渲染引擎。

  2. 路由处理：

    • 在 GET 请求 /topic/edit 中，通过 res.render 方法将 tags 和 topic_type 数据传递给模板。

  3. HTML 模板：

    • 在模板中，可以直接使用传递的数据 (topic_type) 进行条件判断。
    • 使用 <% %> 标签包裹的 EJS 代码会在服务端渲染时执行，从而根据 topic_type 的值动态生成 HTML 内容。
    • 动态生成的 JavaScript 代码会根据条件修改页面元素的样式或状态。

这种方式避免了客户端 window.onload 事件的使用，直接在服务器端根据传递的数据生成对应的 HTML 和 JavaScript。

回到顶部