2016-12-15 8 views
2

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}}}の私の理解によれば、メインコンテンツをレンダリングする場所のプレースホルダとして使用されています。

しかしこれは別のページです。サイドバーからクリックしたリンクに基づいてコンテンツをレンダリングする方法はありますか?

どのようなヘルプとポインタが大いに感謝されます!

+0

_What_コンテンツが '#のsettingsContainer'でレンダリングされなければならないのに役立ちますか? – 76484

答えて

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> 

希望これは

関連する問題