MithrilJS：在顶级组件内路由组件

Question

我刚开始阅读有关秘银的内容。迷人.. 只有一件事让我在第一次阅读后感到困惑。

如何在一个组件内部路由另一个组件（顶级组件）？我的意思是，如何模拟 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?

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

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

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

我最终采纳了我在谷歌搜索中发现的 Leo 的一些建议。

我只能使用此解决方案 "one-layer" 包装并且没有命名插座，但它可以工作并且现在可以完成工作。

归根结底，Angular 只有一个 ng-view，人们不知何故。

所以这是外部组件。

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

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

Answer 3

我尝试了几种解决方案：

使用 m.component 作为路由处理程序 - http://jsfiddle.net/0xwq00zm/1/
使用 App 组件的内部方法，包装内部组件。这有点好，因为我能够将应用程序状态传递给其他组件 - http://jsfiddle.net/0xwq00zm/11/
使用简单的外部函数，用其他元素 - http://jsfiddle.net/0xwq00zm/12/

或多或少复杂 - 对于所有这些，我感觉应用程序会重绘自身，而不仅仅是内部组件。

只需 select 所有元素 - Ctrl+A 在 JsFiddle 的结果窗格中 - 然后导航。它是虚拟的 DOM 并且它不应该重新渲染所有内容，但是对于上述所有解决方案 - 它发生了。

（我也在某些部分尝试了 context.retain = true;，但经过几次导航后，我仍然无法 selected。）

========

希望这些变体对某人有所帮助...而且 - 我很高兴看到完全重新渲染的解决方案。

MithrilJS：在顶级组件内路由组件

MithrilJS: Routing a component inside top level component

javascript

mithril.js