Multiple nested views

[timsim00]

Let's say I have an app with multiple tabs, and one tab has a wizard (multiple steps connected via next/back buttons).

Does every view always have to specify the entire page:
return html<id=page> ${header()} ${tabs()} <id=content>some nested view content</content> ${footer()} </page>

Or is there a pattern where a nested view can just returns it's own content?
return html...nested content...

[goto-bus-stop]

AFAICT most people have something like a layout function that you can pass page content to.

function layout (state, content) {
  return html`
    <div id=${state.pageId}>
      ${header()} ${tabs()}
      <div id="content">${content}</div>
      ${footer()}
    </div>
  `
}

function homeView (state, emit) {
  return layout(state, html`
    <h1>Main page content</h1>
  `)
}

app.route('/home', homeView)

you can then use that function anywhere you need the page layout.

[timsim00]

That makes sense. Thanks, I give it whirl.

[goto-bus-stop]

there is also a website PR for documentation using a similar approach: choojs/website#43