Overloading blocks with dust.js for nested templates

StackOverflow https://stackoverflow.com/questions/21915514

  •  14-10-2022
  •  | 
  •  

Question

I have a layout called layouts/master.dust

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>{+title /}</title>
    <link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div id="wrapper">
    <h3>This is the master header</h3>
    
    {+body /}
</div>

</body>
</html>

I then have a template called index.dust:

{>"layouts/master" /}

{<body}
    <h1>{@pre type="content" key="greeting"/}</h1>
{/body}

Predictably, that outputs

This is the master header

Hello, Alex!

(when supplied with the relevant json)

My issue is, I'm creating another "nested" or "child" template: layouts/admin.dust that looks like:

{>"layouts/master" /}

<h4>This is an admin header</h4>

{+body /}

and a template adminIndex.dust that uses layouts/admin/dust like this:

{>"layouts/admin" /}

{<body}
    <p>This is some stuff for admin</p>
{/body}

My problem, is the output is:

This is the master header
This is some stuff for admin

This is an admin header

This is some stuff for admin

So, my {+body} block is being called twice, and not overridden by my nested template

Is there a way to do that?

Edit

As per my comment, a more 'realistic' example of admin.dust would be:

{>"layouts/master" /}

<h4>This is an admin header</h4>

<div style="float: left; width: 200px;">
<strong>left nav</strong>
<ul>
    <li>Link one</li>
    <li>Link two</li>
    </ul>
</div>

<div style="float: right">
    {+ body /}
</div>

Where by in templates that use the admin layout, their body is in a div floated right (for example)

Was it helpful?

Solution

Your {+body} block is being overridden by your {<body} inline partial in your adminIndex.dust template. The contents of an inline partial (in your case <p>This is some stuff for admin</p>) will be inserted wherever a block is found in your template. If you are hoping to have the master header be replaced by the admin header, you would need your templates to look like this:

layouts/master.dust

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>{+title /}</title>
    <link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div id="wrapper">
    {+header}<h3>This is the master header</h3>{/header}

    {+body /}
</div>

</body>
</html>

layouts/admin.dust

{>"layouts/master" /}

{+header}<h4>This is an admin header</h4>{/header}

adminIndex.dust requires no change.

Note: I have added a {+header} block to layouts/master.dust with a default value, and added a {header} inline partial and removed the {+body} block from layouts/admin.dust. This will output:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div id="wrapper">
    <h3>This is the admin header</h3>


        <p>This is some stuff for admin</p>

</div>

</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top