Question

我刚刚开始阅读有关秘银的内容。迷人.. 首次阅读后，只有一件事令我困惑。

如何将一个组件路由到另一个组件（顶级组件）？我的意思是，我如何模拟角度视图或余烬出口？

我知道我可以通过m.route将组件附加到任何dom节点。但是我怎样才能渲染出顶级组件App，它生成m（“＃view”）等等，然后所有其他可路由的组件都进入App的#view div？这可能吗？否则我必须重复包含页眉和页脚，每个路由转换到一个子组件，对吧？我错过了什么吗？

谢谢。

Answer 1

否则我必须在每个路由转换到子组件时重复包含页眉和页脚，对吧？我错过了什么吗？

我不认为你错过任何东西。秘银尽可能没有魔力，所以很难错过。然而，它仍然比具有魔力的框架更方便。

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

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

// ==UserScript==
// @name     Stack Exchange Code Formatting CSS
// @include  http://*.stackexchange.com/*
// @include  http://*.stackoverflow.com/*
// @include  http://*.serverfault.com/*
// @include  http://*.superuser.com/*
// @grant    GM_addStyle
// ==/UserScript==

GM_addStyle ( "code,pre { font-size:14px !important; white-space:pre-wrap }");

Answer 2

我最终接受了我发现谷歌搜索的狮子座建议。

我只能使用此解决方案进行“单层”换行并且没有命名出口，但它现在可以正常工作。

在一天结束时，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组件的内部方法，包装内部组件。这有点好，因为我能够将aplication状态传递给其他组件 - http://jsfiddle.net/0xwq00zm/11/
使用简单的外部功能，包裹内部组件其他元素 - http://jsfiddle.net/0xwq00zm/12/

或多或少复杂 - 所有这些都让我觉得应用程序会自行重绘，而不仅仅是内部组件。

只需在JsFiddle的结果窗格中选择所有元素 - Ctrl+A - 然后导航。它是虚拟DOM，它不应该重新渲染所有内容，但是上面的所有解决方案都会发生。它会发生。

（我在某些部分也尝试使用context.retain = true;，但仍然经过一些导航后，我找到了无法选择任何内容的点。）

======

希望这些变体可以帮助某些人......但是 - 我很乐意看到完全重新渲染的解决方案。

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

3 个答案: