带有顶部和导航侧边栏的 Hot Towel SPA 布局

【问题标题】：Layout in Hot Towel SPA with top and navigation sidebars带有顶部和导航侧边栏的 Hot Towel SPA 布局
【发布时间】：2013-04-17 07:46:35
【问题描述】：

我想开始一个新的 SPA 应用程序，我发现 Hot Towel 模板很有趣

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

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

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

谢谢

【问题讨论】：

标签： knockout.js navigation single-page-application hottowel

【解决方案1】：

经过一番研究，我了解了 durandal 如何处理子视图

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

要包含左导航，只需添加一个新的 标签，并确保它具有正确的 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 等

【讨论】：