javascript - 为什么模板包含文件不起作用

标签 javascript html node.js

我正在学习如何使用 templatesjs: https://www.npmjs.com/package/templatesjs

他们有一个在其他 html 文件中使用 include html 文件的示例(使用 <%include%> 标签)

当我尝试构建自己的示例时,它不起作用(屏幕为空,没有错误):

var express = require('express');
var app = express();
var fs = require('fs');
var bodyParser = require('body-parser');
app.use(bodyParser.json())
var templatesjs = require('templatesjs');

// FILES
var MAIN_FILE = '/main.html';


/* 
 *  Home page
 */
app.get('/', function (req, res) {

   fs.readFile(__dirname + MAIN_FILE, function(err,data){   
        if(err) throw err;

        templatesjs.set(data, function(err,data){
            if(err) throw err;
            res.send();               
        });
    });  

})


/* 
 *  Startup
 */
var server = app.listen(8082, function () {
   var host = server.address().address
   var port = server.address().port

   // start
   console.log("App listening at http://%s:%s", host, port)
})

主要的 html.file 看起来:

<html>
<title> Tutorial -> Templates Js Server </title>
<head>

</head>
<body>

    <div> 
        <%include Top.html%>
    </div>
    <div> 
    </div>
</body>
</html>

和 Top.html 文件看起来:

<p>TOP</p>

(我尝试将 <html> 标签添加到 Top.html 中,但结果相同);

问题是我得到的网页屏幕是空的(Node.js 没有错误)

我做错了什么?

最佳答案

这是因为您没有向传入请求发送回任何数据!你的 res.send() 是空的。如果你真的想展示一些东西,你应该寄回来。例如:res.send('hello world')

如果您想使用数据渲染模板,您可以使用 templatesjs.renderAll() 方法使用所需数据填充 html 模板,如下所示:

// set default directory for html partials
templatesjs.dir = "./public/partials/";

app.get('/', function(req, res) {

  fs.readFile(__dirname + MAIN_FILE, function(err, data) {
    if (err) throw err;


    templatesjs.set(data, function(err, data) {
      if (err) throw err;

      var list = { // this is your data
        name: 'your name'
      }; 

      templatesjs.renderAll(list, function(err, data) {
        if (err) throw err;
        res.send(data);
      });
    });
  });

})

顶部.html:

<p>Hello, my name is <%name%></p>

并且此文件应驻留在 ./public/partials/ 目录中,因为我们将默认包含目录设置为此路径;

关于javascript - 为什么模板包含文件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47363563/

相关文章:

html - col 一侧不需要的白色 y 轴空间 - bootstrap css

javascript - Vue3 + FabricJS - 在选择多个对象之前,无法调整/编辑使用 react 变量创建的对象

javascript - Google Apps 脚本推送到数组问题

javascript - 通过选中单选按钮更改链接

php - 如果未设置变量,则禁用输入字段

mysql - 在 Nodejs 中编写原始 sql 查询是一个好习惯吗?

javascript - req.session.passport.user 未定义

node.js - 如何在 Node 的异步eachSeries中正确获取结果数组?

javascript - 使用 WebPack 和 Feathers 进行 Node 调试

javascript - 如何在D3条形图中添加分隔符