超載塊與dust.js嵌套模板

我有一個佈局稱爲layouts/master.dust超載塊與dust.js嵌套模板

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

我的問題，是outpu t是：

這是主標題
這是一些工具和管理

這是管理員頭部

這是一些工具和管理

所以，我的{+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右移（例如）

來源

2014-02-20 Alex

您的{+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>

來源

2014-02-20 18:28:32 smfoote

感謝您的回答。在現實中，admin.dust將包含2欄佈局，左側是一個「導航」區域，右側是「身體」或內容...有在admin.dust中指定應該呈現正文的方式？ – Alex

我編輯了我的admin.dust模板以反映上述註釋 – Alex

您是否可以爲管理員和非管理員頁面添加您期望的輸出結果（包括HTML）？ – smfoote

超載塊與dust.js嵌套模板

回答

相關問題