在浏览器中渲染nunjucks模板

Question

nunjucks模板的一部分包含一些变量，这些变量在页面发送到浏览器后要设置。 当前，它还需要导入其他模板。

我是否需要预先包含其他导入的模板？

Answer 1

最好的方法是使用自定义加载程序 。

首先，您将未渲染的模板发送给客户端。 （您不需要预先呈现导入内容）然后编写一个自定义加载程序，您可以在其中定义导入内容的加载方式。

示例（我使用type作为额外的GET参数来定义不应呈现模板）：

var customLoader = {getSource:"",async:true};
customLoader.getSource = function(name, cb) {
    var reqPath = window.location.protocol + "//" + window.location.host + "/" + name + "?type=view";
    $.get(reqPath, (data) => {
        cb(null, {src:data, path:reqPath});
    }); 
}

var env = new nunjucks.Environment(customLoader);

然后，您可以使用env回调来呈现模板：

env.renderString(theInitialTemplate, yourJSONData, (err, res) => {
    console.log(res); //do something with the res variable
});

在此示例中，我使用了异步加载程序。 您可以使用新的Promise加载模型和视图，然后使用Promise.all进行检查以将两者放在一起并渲染模板。