Question

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

可预见的是，输出

这是主标题

您好，Alex！

（当提供相关的json时）

我的问题是，我正在创建另一个“嵌套”或“子”模板：layouts/admin.dust，如下所示：

{>"layouts/master" /}

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

{+body /}

以及使用adminIndex.dust的模板layouts/admin/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位于右侧（例如）

Answer 1

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

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}内联部分，并从{+body}中删除了layouts/admin.dust块}。这将输出：

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

使用dust.js重载块以嵌套模板

1 个答案: