knockout.js - 带有顶部和导航侧边栏的 Hot Towel 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 样式的问题

要包含左导航，只需添加一个新<!--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 等