Crystal
Crystal

Reputation: 6160

How to pass partials to a Dust.js template

I have consulted the Dust.js GitHub page and it says that I can pass partials to templates as shown below:

{@partial checkbox_title="JM"}
{>toggle/}
{/partial}

and like this:

{>toggle checkbox_title="Hi JM"/}  

I've tried both and neither of them worked, so I used the following:

Parent:

{< checkbox_title}
Hi JM
{/checkbox_title} 
{>toggle/}

Child:

{+checkbox_title/}

The above works, except when I try to render a template using the following:

dust.render("toggle", base.push({checkbox_title:"hhhhhh"}),
    function(err, html) { console.log(html); });

Aim: to override the block in the child template using dust.render

Upvotes: 1

Views: 5021

Answers (1)

Simon
Simon

Reputation: 1754

If you have a template named someTemplate you can include it in another template using {>someTemplate/}. You can assign context with {>someTemplate:someContext/} and pass inline parameters with {>someTemplate some_param="A parameter"/}. Example:

<h1>{heading}</h1>
<p>{article}</p>
{>someTemplate/}

If you want to use blocks (they have the following syntax {+blockName/} or {+blockName}Default block content{/blockName} then you must define a template with the block, then include that template as a partial, then override the block. Example template with name "someTemplate":

<h1>{heading}</h1>
<p>{article}</p>
{+someBlock/}

Then override the block like so:

{>someTemplate/}
{<someBlock}
    My custom block content.
{/someBlock}

EDITS:

To customise the block outside of the template, create a context using dust.makeBase. This context object can be passed to dust.render in place of your templateData (dust does this internally anyway). Then add a block to the context using context.shiftBlocks with the argument being a hash with the blocks you want to override. Example:

var context = dust.makeBase(templateData).shiftBlocks({
    someblock: function (chunk, context) {
        return chunk.write('my new block content');
    }
});

dust.render('myTemplate', context, function (error, html) {
    console.log(html);
});

Some final comments: to be honest, I've not had a need to do this so far. I'd try to do as much with the template syntax as possible so that your templates can be understood on their own. Anyway, I hope this helps.

Upvotes: 6

Related Questions