热毛巾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>

如何添加新区域left_av？

由于

Answer 1

经过一些研究，我了解durandal如何使用子视图

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

要包含左侧导航，必须要做的就是添加一个新的<!--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等等都是关键问题