4

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

如何将一个组件路由到另一个组件（顶级组件）？我的意思是，我如何模拟 angulars ng-view 或 embers 出口？

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

谢谢你。

4

3 回答 3

3

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

我不认为你缺少任何东西。秘银的魔法越少越好，所以很难错过。然而，它仍然比具有魔法的框架更方便。

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

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,
})
于 2015-07-10T17:52:54.297 回答
1

我最终接受了我在谷歌上搜索到的狮子座的建议。

我只能使用此解决方案进行“一层”包装并且没有命名插座，但它现在可以工作并且可以完成工作。

归根结底，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
}));

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

于 2015-07-13T04:00:53.083 回答
0

我尝试了几种解决方案：

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

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

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

（我也尝试了context.retain = true;某些部分，但经过几次导航后，我仍然没有选择任何内容。）

========

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

于 2016-12-19T14:01:04.917 回答