在客户端上编译和渲染复杂的Dust.js模板

compiling and rendering complex Dust.js templates on the client

本文关键字：复杂 Dust js 模板 客户端 编译      更新时间：2023-09-26

我试图用客户端的嵌套部分动态编译和渲染Dust模板，但我一直得到"错误：找不到模板：[templatePath]"。如果我使用的子模板不引用任何部分（例如/templates/includes/childTemplate.dust），但不引用更高级别的主模板（例如/ttemplates/main.dust？

var model = { ... };
$.get('/templates/main.dust', function(tpl) {
    var compiled = dust.compile(tpl, 'mainTemplate');
    dust.loadSource(compiled);
    dust.render('mainTemplate', model, function(err, output) {
        if (err) {
            console.log(err);
        }
        $('#target').html(output);
    });
});

Dust部分在渲染时解析，而不是在编译时解析，因此无法预编译为主模板。

相反，Dust为您提供了一种方法，告诉它如何通过使用dust.onLoad函数加载其他模板。

dust.onLoad = function(templateName, callback) {
  // naive jQuery loading of a new template
  $.get('/templates/' + templateName + '.dust', function(data) {
    callback(null, data);
  });
};

如果您在收到模板后需要编译模板，请将其作为第二个参数传递给callback，Dust将对其进行编译。如果您正在加载预编译模板，只需通过调用dust.loadSource(data)然后调用callback()来评估预编译模板。

您可能希望在工作流中加入模板预编译步骤，也许可以使用Dust附带的dustc编译器，这样您就不必在客户端上进行编译（这很慢，而且必须包含dust-full.js而不是dust-core.js）。

您可以考虑将Dust及其模板加载为AMD模块。看见http://www.dustjs.com/guides/setup/#amd。如果您这样做，Dust将使用require自动为您连接onLoad。

Dust repo提供了一些在浏览器中处理Dust的不同方法的基本示例。请参阅examples/basic browser和examples/amd。

相关文章：