meteor - Iron-Router:我可以针对特定的嵌套模板来显示我的 loadingTemplate 吗？

Question

我在 meteor 项目中使用 iron-router。我想要做的是仅在页面上的特定嵌套模板中显示我的 loadingTemplate(即使用我的 waitOn 正在等待的数据的内容区域)，而不是像 Router.onBeforeAction 那样代替整个页面('加载中');.

是否可以使用 iron-router 来做到这一点？

我的简化代码:

layout.html

<template name="layout">
    {{> yield}}
</template>

<template name="foo">
    //bunch of intro text
        {{> bar}}
    //a big CTA
</template>

<template name="bar">
    {{this.something}}
</template>

我想要做的是用 loadingTemplate 替换 bar 模板，直到加载数据。页面的其余部分可以呈现。 这是默认方式，当然，它显示 loadingTemplate 代替整个页面(例如 `foo'):

router.js

Router.configure({
  layoutTemplate: 'layout',
  notFoundTemplate: 'notFound',
  loadingTemplate: 'loading'
});

//Router.onBeforeAction('loading'); //Future SO visitors: use this to show the loading template on all routes, if that's what you desire. I only want to show the loading template on one route.

this.route('home', {
    path: '/',
    action: function () {
      if (this.ready()) // is there a short-hand version btw?
        this.render();
      else
        this.render('loading');
    },
    onBeforeAction: function () {
      //this.render('loading'); //shouldn't this be the short-hand version? Doesn't work.
    },
    waitOn: function() {
      return Meteor.subscribe('baz');
    },
    data: function () {
      return Baz.find();
    }
  });

如果 iron-router 无法实现我正在寻找的东西，欢迎提供任何建议的替代方案。谢谢!

对于 future 的访客，这里是铁路由器 docs .

Answer 1

是的，这是可能的。阅读文档中名为 Using a Layout with Yields 的部分.基本上您需要做的是向您的布局模板添加更多的 yield ，并定义其他子模板以进入它们。 'loading' 模板将仅在主 yield 中加载。

<template name="layout">
  {{> yield region='header'}}
  {{> yield}}
  {{> yield region='footer'}}
</template>

和

Router.map(function () {
  this.route('home', {
    path: '/',
    template: 'foo',
    layoutTemplate: 'layout', // This and the following two can also be defined
    loadingTemplate: 'loading', // in Router.configure like your code does
    notFoundTemplate: 'notFound',
    yieldTemplates: {
      'myHeader': {to: 'header'}, // You need to define the other templates
      'myFooter': {to: 'footer'} // that will be sent into other yields
    },
    waitOn: function () {
      return Meteor.subscribe('baz');
    },
    data: function () {
      return Baz.find();
    }
  });
});

代码中的action 和onBeforeAction 参数是不必要的；这就是 waitOn 正在做的事情。