Макет в Hot Towel SPA с верхней и боковой панелями навигации

Я хочу запустить новое 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?

Спасибо


navigation single-page-application knockout.js hottowel
person bzamfir    schedule 23.04.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

После некоторых исследований я понял, как 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 и т. д.

person bzamfir    schedule 29.04.2013