如何在Node.js服务器上使用Handlebars渲染静态HTML文件? [英] How can I render a static HTML file with Handlebars on a Nodejs server?

问题描述

为此，我在网上遇到了很多资源，但没有找到足够直接的资源供我理解.

I have come across plenty of resources online for this but haven't been able to find one that is straight forward enough for me to understand.

此刻，我在具有把手内容的HTML文档中有多个大型<script>标记.服务器将此HTML文档发送给客户端，然后客户端在客户端使用来自AJAX调用的数据来呈现页面.我想将整个流程移到服务器端，以便服务器要做的就是发送静态文件，并在更新数据时重新呈现页面.数据每天更改几次-这就是为什么不对其进行硬编码的原因，并且我希望在数据更新时在HTML文档上运行把手编译器.

At the moment, I have multiple massive <script> tags in an HTML document that has handlebars content. The server sends this HTML document to the client where the client then renders the page with data from an AJAX call. I'd like to move this entire process server-side so that all the server has to do is send a static file and re-render the page when data is updated. Data changes a few times per day - which is why it isn't hard coded in and I would like to run the handlebars compiler on the HTML document when data is updated.

是否可以通过函数简单地将带把手模板的HTML文档放入函数中，以生成带有数据填充的新HTML文件?

Is it possible to simply put the HTML document with handlebars templating in <script> tags through a function to generate a new HTML file with data filled in?

这是我运行在app.js文件中的代码，该文件在节点服务器上运行，该服务器没有执行我想要的操作:

Here is the code I have within my app.js file that is runned the Node server that does not do what I want it to:

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.

The following can render handlebars to static html. Run node example.js. You may need to run npm install --save handlebars prior.

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"

If your handlebars templates are simple, with only string replacement, you can do this with underscore.js. Assume this example is named '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.

Then run node generate.js to output the rendered template to the console. You may need to do npm install --save underscore prior.

这篇关于如何在Node.js服务器上使用Handlebars渲染静态HTML文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！