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会使用onLoad为您自动连接require。

Dust repo有一些基本的例子，说明了在浏览器中处理Dust的不同方法。请参阅examples/basic-browser和examples/amd。

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

1 个答案: