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

Question

我正在尝试使用来自客户端的嵌套部分动态编译和渲染 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);
    });
});

Answer 1

Dust partials 在渲染时解决，而不是在编译时解决，因此无法预编译成主模板。

相反，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。