使用dust.js为嵌套模板重载块答案

【问题标题】：Overloading blocks with dust.js for nested templates使用dust.js为嵌套模板重载块
【发布时间】：2014-02-20 17:41:46
【问题描述】：

我有一个名为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>

然后我有一个名为index.dust的模板：

{>"layouts/master" /}

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

可以预见的是，输出

这是主标题

你好，亚历克斯！

（当提供相关的 json 时）

我的问题是，我正在创建另一个“嵌套”或“子”模板：layouts/admin.dust，看起来像：

{>"layouts/master" /}

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

{+body /}

还有一个使用 layouts/admin/dust 的模板 adminIndex.dust，如下所示：

{>"layouts/admin" /}

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

我的问题，输出是：

这是主标题
这是管理员的一些东西

这是一个管理员标题

这是给管理员的一些东西

所以，我的 {+body} 块被调用了两次，并且没有被我的嵌套模板覆盖

有没有办法做到这一点？

编辑

根据我的评论，admin.dust 的更“现实”示例是：

{>"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>

在使用 admin 布局的模板中，它们的 body 位于右浮动的 div 中（例如）

【问题讨论】：

标签： dust.js

【解决方案1】：

您的{+body} 块被您的{<body} 内联部分覆盖在您的adminIndex.dust 模板中。内联部分的内容（在您的情况下为 <p>This is some stuff for admin</p>）将插入到模板中找到块的任何位置。如果您希望将主标头替换为管理标头，则需要您的模板如下所示：

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 无需更改。

注意：我已将 {+header} 块添加到具有默认值的 layouts/master.dust，并添加了 {header} 内联部分并从 layouts/admin.dust 中删除了 {+body} 块。这将输出：

 <!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>

【讨论】：

感谢您的回答.. 实际上，admin.dust 将包含 2 列布局，左侧是“导航”区域，右侧是“正文”或内容...有没有办法在 admin.dust 中指定应该在哪里呈现身体？
我已经编辑了我的 admin.dust 模板以反映上述评论
您能否为管理员和非管理员页面添加您期望的输出（包括 HTML）？
在你的代码中你写了{/haeder}而不是{/header}。 Stackoverflow 需要 6 个字符来更改以进行编辑。 ¯_(ツ)_/¯