Javascript 在客户端上编译和呈现复杂的Dust.js模板

我试图用客户端的嵌套部分动态编译和呈现一个Dust模板，但我一直得到“错误：找不到模板：[templatePath]”。如果我使用的子模板不引用任何部分（例如./templates/includes/childTemplate.dust），但不引用更高级别的主模板（例如./templates/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.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

）

你可以考虑装填灰尘和模板作为AMD模块。看见如果您这样做，灰尘将通过使用

require

自动为您连接

onLoad

---

Dust repo提供了一些在浏览器中处理灰尘的不同方法的基本示例。请参见和。

谢谢，您的示例对于我正在编写的简单模拟非常有用。根据你的建议，我最终预编译到AMD模块，通过requirejs预加载核心模板，并根据需要加载可选模板。这是一个新功能，所以请务必让我们知道它是如何为您工作的。正在进行改进，以便您可以将模板直接传递给dust.render，而不是其名称。