我有一个快速 Handlebars 应用程序，其布局文件为 main.hbs。
//main.hbs
<html>
<head></head>
<body>
{{> header}}
{{{body}}}
<script src='/js/jquery-2.2.4.min.js'></script>
<script src='/js/bootstrap.min.js'></script>
</body>
</html>
当我单击链接时，让我们在仪表板页面中说“设置”，然后它会重定向到设置页面，其中有侧边栏和主要内容页面。 此页面还使用 main.hbs 作为布局。
//settings.hbs
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="/settings/account">Account<span class="sr-only">(current)</span></a></li>
<li><a href="/settings/view">Views</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Sites</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li class="active">Settings</li>
</ol>
<div id="settingsContainer">
//Content should be rendered here just like the {{{body}}}
</div>
</div>
</div>
那么我怎样才能在“settingsContainer”中呈现所需的内容。
根据我的理解，布局文件 {{{body}}} 用作应呈现主要内容的占位符。
但这是一个不同的页面。有没有一种方法可以根据从侧边栏单击的链接呈现内容。
任何帮助和指示将不胜感激!
最佳答案
我对 Handlebars 了解不多，但您可以使用引导选项卡实现相同的目的。
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<div class="tabbable">
<ul class="nav nav-sidebar">
<li class="active"><a href="#account" data-toggle="tab">Account<span class="sr-only">(current)</span></a></li>
<li class=""><a href="#views" data-toggle="tab">Views</a></li>
</ul>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li class="active">Settings</li>
</ol>
<hr>
<div id="settingsContainer">
<div class="tabbable">
<div class="tab-content">
<div class="tab-pane active" id="account">
//render partial for account
</div>
<div class="tab-pane" id="views">
//render partial for views
</div>
</div>
</div>
</div>
</div>
</div>
希望这有帮助
关于node.js - 如何通过布局使用快速 Handlebars 中的侧边栏和主要内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41163882/