繁体   English   中英

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

[英]How can I render a static HTML file with Handlebars on a Nodejs server?

为此,我在网上找到了大量资源,但无法找到足够直接让我理解的资源。

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

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

这是我的app.js文件中的代码,该文件在 Node 服务器上运行,但不执行我想要的操作:

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);

以下可以将车把渲染为静态 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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM