1

我正在尝试在我的 JS 堆栈中使用 nunjucks。

我已经用 gulp-nunjucks 预编译了我的模板：

gulp.task("build:tpl", function() {
  var options = {
    // ... empty for the moment
  };

  return gulp.src("src/text/*.txt", { base : path.join(__dirname, "src/text") } )
    .pipe(nunjucks())
    .pipe(concat("ui-template.js"))
    .pipe(gulp.dest("js/tpl"));
});

然后我在需要 JS 中包含 ui-template 以供使用：

/**
 * setup UI
 *
 * "ui-colorchess.txt" is the main template
 * it contains (nested) subtemplates (include "ui-history.txt" and so forth)
 */
UI.prototype.setup = function() {
  var that = this;

  // first we grab precompiled templates
  require(["js/tpl/ui-template.js"], function() {
    // ... into requirejs variables (or not)

    // some context vars, just to provide an ID in HTML
    var ctx = {
      id : "colorchess-1",
      otherStuff : 2
    };

    var env = new nunjucks.Environment(
      new nunjucks.WebLoader("/js/tpl")
    );

    // it sucks here !
    var c = env.render("ui-colorchess.txt", ctx);

    console.log(c);

     // try to assign result to a container
    that.bounds.innerHTML = c;

    // one more time... when it will work !
    // var board = new Board("colorchess-board-" + that.key);
    // board.firstDraw();
  });

我在控制台中收到错误消息：

Uncaught Template render error: (ui-colorchess.txt)
  TypeError: Cannot read property 'resolve' of undefined

任何人都可以找出问题所在吗？

4

2 回答 2

1

sindresorhus/gulp-nunjucks#1中描述的相同问题。

如果要连接文件，则必须设置name选项：

var options = {
  name: function (file) {
    return file.relative;
  }
};
于 2015-04-16T16:57:00.393 回答
0

我通过执行以下操作解决了这个问题：

  • 在 *.html 中重命名我的模板
  • 在我的包含中删除像“./subtemplate.txt”这样的路径
  • 设置配置（“../html”）
  • 使用 requireJS 正确要求
于 2015-04-16T17:30:55.603 回答