如何在Nodejs服务器上使用Handlebars呈现静态HTML文件?

时间:2018-02-06 02:01:08

标签: javascript node.js handlebars.js

我在网上遇到了大量的资源,但我们找不到足够直接让我理解的资源。

目前,我在HTML文档中有多个大量<script>标记,这些标记包含句柄内容。服务器将此HTML文档发送到客户端,然后客户端使用来自AJAX调用的数据呈现页面。我希望将整个流程移动到服务器端,以便服务器所要做的就是发送静态文件并在数据更新时重新呈现页面。数据每天更改几次 - 这就是为什么它没有硬编码,我想在数据更新时在HTML文档上运行把手编译器。

是否可以通过函数简单地将带有把手的HTML文档放入<script>标签中,以生成填入数据的新HTML文件?

以下是我在app.js文件中运行的代码,该代码运行的节点服务器不能满足我的要求:

function registerHelpers(callback){
  Handlebars.registerHelper('equal', function(lvalue, rvalue, options) {
    if (arguments.length < 3)
        throw new Error("Handlebars Helper equal needs 2 parameters");
    if( lvalue!=rvalue ) {
        return options.inverse(this);
    } else {
        return options.fn(this);
    }

  });

  Handlebars.registerHelper('trim', function(text) {
    text = text.replace(/ /g, '');
    return new Handlebars.SafeString(text);
  });

  callback();
}

function buildHomePage() {
  var source = require(__dirname + '/public/home.handlebars');
  var template = Handlebars.precompile(source);
  var collection = db.get('datalist'); //Monk call to MongoDB
  collection.find({}, function (err, docs){
    var result = template(docs);
    console.log(result)
    var fs = require('fs');
        fs.writeFile("test.html", result, function(err) {
        if(err) {
          console.log(err);
        }
    });
  });
};

registerHelpers(buildHomePage);

1 个答案:

答案 0 :(得分:1)

以下内容可以将手柄呈现为静态html。运行节点example.js。您可能需要先运行npm install --save handlebars

var fs = require('fs');
var Handlebars = require('handlebars');

function render(filename, data)
{
  var source   = fs.readFileSync(filename,'utf8').toString();
  var template = Handlebars.compile(source);
  var output = template(data);
  return output;
}

var data = JSON.parse(fs.readFileSync("./data/strings.json", 'utf8'));

var result = render('./templates/somefile.html', data);

console.log(result);

如果您的把手模板很简单,只需更换字符串,您可以使用underscore.js执行此操作。假设此示例名为'generate.js'

var fs = require('fs');
var _ = require('underscore');
_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;

function render(filename, data)
{
  var source   = fs.readFileSync(filename,'utf8').toString();
  var compiled = _.template(source);
  return compiled(data);
}

var data = JSON.parse(fs.readFileSync("./data/strings.json", 'utf8'));

var result = render('./templates/somefile.html', data);

console.log(result);

然后运行node generate.js将呈现的模板输出到控制台。您可能需要事先npm install --save underscore