2017-11-18 85 views
1

我正在學習如何使用templatesjs來自: https://www.npmjs.com/package/templatesjs爲什麼模板包括文件不起作用

他們使用包括在其他的HTML文件的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的沒有錯誤)

我在做什麼錯?

+0

首先,爲什麼要使用該節點包?看起來這不是一個有名的強大模塊,請使用[Pug](https://pugjs.org/api/getting-started.html) – M98

回答

2

這是因爲你沒有發回任何數據到傳入的請求!你的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); 
     }); 
    }); 
    }); 

}) 

的top.html:

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

和此文件應該駐留在./public/partials/目錄中,因爲我們將默認包含目錄設置爲此路徑;