MithrilJS:在顶层组件中路由组件

Question

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

如何将一个组件路由到另一个组件(顶级组件)？我是说，我该怎么模仿视角或者余烬的出口？

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

谢谢。

Answer 1

否则，我必须反复地将页眉和页脚包含在每个到子组件的路由转换中，对吗？我是不是遗漏了什么？

我不认为你错过了什么。米思里有尽可能少的魔法，所以很难错过一些东西。然而，在某种程度上，它仍然比具有魔力的框架更方便。

我只是将我的视图封装在一个模板函数中。我是个懒惰的人，但即使我也不介意这样做，因为它很灵活，不让人困惑。

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,
})

Answer 2

最后，我同意了狮子座的建议，我在谷歌上找到了这些建议。

我只能有“一层”包装和没有命名的出口与此解决方案，但它的工作，并做了目前的工作。

在一天结束时，角只有一个ng-视图，人们以某种方式过关。

这是外部成分。

var Layout = {
  controller(subcomp) {
    this.own = {
      slide: false
      };
    this.subctrl = new subcomp.controller();
    this.subview = subcomp.view;
  },
  view(ctrl) {
    return bubble(ctrl.own, ctrl.subview(ctrl.subctrl));
  },
  wrap(routes) {
    var map = {};
    Object.keys(routes).map((r) => {
      map[r] = {
        controller() {
          return new Layout.controller(routes[r]);
        },
        view: Layout.view
      };
    });
    return map;
  }
};

这是插入组件的外部视图。

function bubble(vm, subview) {
  return m("main", [
    m("#outlet",[ subview ])
  ]);
}

然后在布局中路由所有子组件。

m.route.mode = "pathname";
m.route(document.body, "/articles/create", Layout.wrap({
  "/articles/create": CreateArticle
}));

希望这对处于同样情况的人有所帮助。