如何用jade以编程方式生成一个html页面？答案

【问题标题】：How to programmatically generate an html page with jade?如何用jade以编程方式生成一个html页面？
【发布时间】：2014-05-11 10:13:40
【问题描述】：

colors.jade的内容：

html
  body
    for color in colors
      p color

genHtml.js 的内容：

var jade = require('jade');
var colors = ['red', 'blue', 'green'];

var html = jade.renderFile('colors.jade', {globals: [colors] });
console.log(html);

当您运行 node genHtml.js 时，您会收到以下错误：

TypeError: colors.jade:3
    1| html
    2|   body
  > 3|     for color in colors
    4|       p color
    5| 

Cannot read property 'length' of undefined

您如何使翡翠编译器可以使用颜色数组？

相关参考：http://jade-lang.com/api/

【问题讨论】：

您正在将颜色数组传递给数组，因此请删除多余的括号，并将全局键重命名为颜色。

标签： javascript node.js pug

【解决方案1】：

在这种情况下，jade 重载第二个参数options 以包含locals。此外，renderFile 不返回 html，在回调中返回 html。你应该使用：

var  jade = require('jade');
var colors = ['red', 'blue', 'green'];

jade.renderFile('colors.jade', { colors: colors }, function(err, html) {
    // if err...
    console.log(html);
});

（这是未经测试的，但应该可以）

【讨论】：

好的，看起来它可以选择返回 html 值，但是我强烈建议不要这样做，因为由于从文件系统加载文件，这将使它成为一个同步函数。跨度>

【解决方案2】：

您将colors 数组传递到一个数组中，因此删除多余的括号，并且globals 键应重命名为colors。还要在color 之前加上= 来输出值。

测试和工作：

colors.jade

  html
      body
        for color in colors
          p=color

genHtml.js

var jade = require('jade');
var colors = ['red', 'blue', 'green'];

var html = jade.renderFile('colors.jade', { colors: colors });
console.log(html);

标准输出

<html><body><p>red</p><p>blue</p><p>green</p></body></html>

【讨论】：