Skip to content

Loading Dust via AMD (require.js)

Seth Kinast edited this page Mar 5, 2015 · 9 revisions

Dust supports being loaded as an AMD module as of Dust 2.6.0.

To maintain backwards compatibility, you must enable a config flag to tell Dust to register itself as a named AMD module (in the same way jQuery works).

define.amd.dust = true;

After you've done this, you can load dust-core.js or dust-full.js as a module.

<script src="r.js"></script>
<script type="text/javascript">
    define.amd.dust = true;
    require(["lib/dust-full"], function(dust) {
        dust.render(...);
    });
</script>

Helpers

If you are using dustjs-helpers 1.6.0 or newer, the helpers also register themselves as an anonymous AMD module. It seems to work best if you require the helpers after Dust has already been loaded.

define.amd.dust = true;
require(["lib/dust-full"], function(dust) {
  require(["lib/dust-helpers"], function() {
    // dust helpers are available when you call dust.render()
  });
});

Templates

You can also compile your templates as AMD modules. Before compiling a template, set

dust.config.amd = true

You can preload your templates using Require by including a template file as a dependency.

define.amd.dust = true;
require(["lib/dust-full", "tmpl/compiled"], function(dust) {
    // tmpl/compiled contains several compiled templates
    dust.render("hello", ...); // render one of the templates in tmpl/compiled
});

If a template is not preloaded, Dust will attempt to require it by passing the template's name to require. To make use of this feature, templates should be compiled with names that an AMD loader would expect. For example, a template located at tmpl/home/main.dust must be named tmpl/home/main for Dust to load it correctly. If you use the dustc compiler this is handled for you.