Search code examples
node.jsdust.js

DustJS extend layout?


In Jade JS, it's very easy to extend a layout. Supposed one have layout.jade, and for the index.jade, just do:

extend layout

block content // content comes here

Then it's pretty sufficient.

I searched the official guide but didn't found how to do. The most similar seems to be something like:

{>partials}

But still that's not extending a layout. How to achieve similar thing in DustJS? Thanks a lot.


Solution

  • I found the solution... turns out I didn't read the dust documents careful enough.

    Layout File:

    <html>
    <head>
      <title>{+title}Location of Title{/title}</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
      <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.css" rel="stylesheet">
      <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
    </head>
    <body>
      <header>
        <h1 id="page-title" class="very-middle">{+title}Title Comes Here{/title}</h1>
      </header>
      <div id="content">
        {+content}
        Content Comes Here
        {/content}
      </div>
    
    </body>
    </html>
    

    Content File:

     {>layout/}
    
     {<content}
       {!
         Content simply comes here
       }
     {/content}
    

    So the point is the use of {+placeHolder}, {>toExtend} and {