如何使用側邊欄和主要內容的快速車把佈局

我有一個快速車把應用程序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}}}的理解，它被用作主要內容應該呈現的位置的佔位符。

但這是一個不同的頁面。有沒有一種方法可以基於從側邊欄中點擊的鏈接呈現內容。

任何幫助和指針將非常感謝！

來源

2016-12-15 Saroj Sasmal

_What_含量應在'＃settingsContainer'呈現？ – 76484

我不太瞭解handlebars，但你可以通過bootstrap選項卡實現。

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

希望這有助於

來源

2017-01-06 02:18:32 Dev

如何使用側邊欄和主要內容的快速車把佈局

回答

相關問題