布局在热毛巾SPA与顶部和导航侧边栏

Question

我想启动一个新的SPA应用程序，我发现Hot Towel模板非常有趣

我需要有两个导航区-左侧面板和顶部面板。

但是Hot towel的默认shell只包含三个区域——页眉、页脚和内容

<div>
  <header>
    <!--ko compose: {view: 'nav'} --><!--/ko-->
  </header>
  <section id="content" class="main container-fluid">
    <!--ko compose: {model: router.activeItem, 
        afterCompose: router.afterCompose, 
        transition: 'entrance'} -->
    <!--/ko-->
  </section>
  <footer>
    <!--ko compose: {view: 'footer'} --><!--/ko-->
  </footer>
</div>

我如何添加一个新的区域，leftnav?

谢谢

Answer 1

经过一番研究，我了解了durandal是如何与子视图一起工作的

任何视图都可以导入任意数量的子视图，布局只是我们如何设计和样式div与CSS的问题

要包含一个左导航，所要做的就是添加一个新的<!--ko ... -->标签，并确保它有适当的css类/样式呈现为左导航

像这样

<!--ko compose: {view: 'top-nav'} --><!--/ko--> 
<!--ko compose: {view: 'left-nav'} --><!--/ko--> 
<!--ko compose: {model: router.activeItem, 
    afterCompose: router.afterCompose, 
    transition: 'entrance'} -->
<!--/ko-->
<!--ko compose: {view: 'footer'} --><!--/ko-->

额外的标签，如<header>, <section>等甚至不需要，他们可以简单地在子视图的顶部标签(或者它工作得很好，取决于一个人的喜好)

从这里开始，就取决于我们如何定义实际视图nop-nav, left-nav等