Question

我在流星项目中使用铁路由器。我想要做的是仅在页面上的特定嵌套模板中显示我的loadingTemplate（即使用我的waitOn正在等待的数据的内容区域），而不是像Router.onBeforeAction('loading');那样代替整个页面。

是否可以使用铁路由器执行此操作？

我的简化代码：

的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＆＃39;）：

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

如果我所寻找的东西不可能使用铁制路由器，那么任何建议的替代品都是最受欢迎的。谢谢！

对于未来的访问者，这里是铁路由器docs。

Answer 1

是的，有可能。阅读名为Using a Layout with Yields的文档中的部分。基本上，您需要做的是为布局模板添加更多的产量，并定义其他子模板。加载＆＃39;模板只会在主要产量中加载。

<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正在做的事情。

Answer 2

Geoffrey Booth完全赞同将其发送到正确的方向。原始问题的完整技术答案如下。简短的回答是肯定的，正如Geoffrey所提到的那样，可以使用铁路由器来定位特定的嵌套模板。更复杂的答案：根据您的使用情况，可能有更好的选择......请参阅Geoffrey的回答以便进行讨论。

使用原始问题中的示例的完整工作代码：

html

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

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

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

和路由器

Router.onBeforeAction('loading');

Router.map(function () {
  this.route('home', {
    path: '/',
    template: 'bar',
    layoutTemplate: 'layout',
    loadingTemplate: 'loading',
    notFoundTemplate: 'notFound',
    yieldTemplates: {
      'myHeader': {to: 'header'},
      'myFooter': {to: 'footer'},
      'foo': {to: 'body'}
    },
    waitOn: function () {
      return Meteor.subscribe('baz');
    },
    data: function () {
      return Baz.find();
    }
  });
});

Iron-Router：我可以定位特定的嵌套模板来显示我的loadingTemplate吗？

2 个答案: