Inspired by duster.js, this tool lets you auto compile your dust templates inside Visual Studio.
Download and install from Visual Studio Gallery: DustJsGenerator.
hello.html
<h1>Hello {name}!</h1>
Note: You can name the template file anything (e.g. hello.dust, hello.template etc.). and the tool will work irrespective of the file's extension. I prefer HTML since that enables Intellisense within Visual Studio. Also enables Emmet, ReSharper specific features if you have those extensions.
DustJsGenerator will compile this to hello.dust.js:
(function() {
dust.register("hello", body_0);
function body_0(chk, ctx) {
return chk.write("<h1>Hello ").reference(ctx._get(false, ["name"]), ctx, "h").write("!</h1>");
}
return body_0;
})();
Note: The name of the template being registerd with dustJs is derived from the file name ("hello" in this example).
You can now include this javascript file in your bundle or as a link on your page:
<script src="dust-core-0.3.0.min.js"></script>
<script src="hello.dust.js"></script>
To render your template, call:
<script type="text/javascript">
function render(){
dust.render("hello", {name: "Dust JS"}, function (e, html){
$('.hello').append(html);
});
}
</script>
Which will output:
<div class="hello"><h1>Hello Dust JS!</h1></div>
- Install Visual Studio Extension: DustJsGenerator.
- In your solution, select the desired dust template.
- Under
Properties > Custom Tool
, enterDustJsGenerator
.
- Save the file. This will generate
<filename>.dust.js
file. - From now on, the tool will automatically regenerate the compiled template upon saving any changes to the dust template.