javascript - Mithril JS : Routing a component inside top level component

Question

我刚开始阅读有关 Mithril 的信息。迷人..只有一件事让我在第一次阅读后感到困惑。

如何将一个组件路由到另一个组件(顶级组件)中？我的意思是，如何模拟 angulars ng-view 或 embers outlet？

我知道我可以让 m.route 将组件附加到任何 dom 节点。但是我如何渲染顶级组件应用程序，它生成 m("#view") 等等，然后所有其他可路由组件都进入应用程序的#view div？这可能吗？否则我必须在每个到子组件的路由转换中重复包含页眉和页脚，对吗？我错过了什么吗？

谢谢。

Answer 1

Otherwise I have to repeatedly include header and footer with every route transition to a subcomponent, right? Am I missing something?

我认为您没有遗漏任何东西。 Mithril 的魔力越少越好，所以很难漏掉任何东西。然而，它仍然比具有魔法的框架更方便。

我只是将我的 View 包装在一个模板函数中。我是一个懒惰的人，但即使我也不介意这样做，因为它很灵活而且不会造成混淆。

http://codepen.io/farzher/pen/vOjjEB

function viewTemplate(content) {
  return function() {return [
    m('#header', [
      'my site',
      m('a', {config:m.route, href:'/'}, 'home'),
      m('a', {config:m.route, href:'/1'}, 'page 1'),
      m('a', {config:m.route, href:'/2'}, 'page 2'),
    ]),
    m('hr'),

    m("#view", content),

    m('#footer', 'copyright my site'),
  ]}
}

component1 = {
  view: viewTemplate([
    m('h1', 'component 1 page')
  ])
}

component2 = {
  view: viewTemplate([
    m('h1', 'component 2 page')
  ])
}

m.route(document.body, '/', {
  '/': {view: viewTemplate()},
  '/1': component1,
  '/2': component2,
})