Question

我有一个带有 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}}}用作占位符，用于显示主要内容的位置。

但这是一个不同的页面。有没有办法可以根据侧边栏点击的链接呈现内容。

非常感谢任何帮助和指针！

Answer 1

我对车把不太了解，但您可以通过引导标签实现相同目的。

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

希望这有帮助

如何在带有布局的快速车把中使用侧边栏和主要内容

1 个答案: