如何在布局的快速句柄中使用侧边栏和主要内容
我有一个快速的手柄应用程序与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> 当我点击一个链接让我们说仪表板页面中的“设置”，然后它redirect到设置页面，我有侧边栏和主要内容页面。 此页面也使用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}}}被用作主要内容应该呈现的位置。
但这是一个不同的页面。 有没有一种方法可以根据从侧边栏中点击的链接呈现内容。
任何帮助和指针将不胜感激！
我不太了解把手，但是你可以通过引导标签实现。
<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>
希望这可以帮助