Question

我有以下模板

<template name="myTabs">
  <div class="my-tabs">
    <div class="page-header">
      <h1>My Tabs</h1>
    </div>

    <form class="navbar-form navbar-left" role="search">
      <a href="{{pathFor 'newTab'}}" class="btn btn-default">New</a>
      <div class="form-group">
        <input type="text"
          name="tab"
          class="form-control typeahead"
          autocomplete="off" spellcheck="off"
          data-source="tabs"
          data-template="tabSearch"
          placeholder="Filter"/>
      </div>
    </form>

    {{>tabsTable}}
  </div>
</template>

以下嵌套模板

<template name='tabsTable'>
  <table class="table table-hover">
   ... table that displays data from collection
  </table>
</template>

以下路线

this.route('myTabs', {
    path: '/mytabs',
    layoutTemplate: 'dashboardLayout',
    loginRequired: 'entrySignIn',
    waitOn: function() {
      return this.subscribe("mytabs", Meteor.userId());
    },
    data: {
      tabs: Tabs.find({})
    },
    onAfterAction: function() {
      SEO.set({
        title: 'My Tabs | ' + SEO.settings.title
      });
    }
  });

问题是当我访问myTabs路由时，整个模板被加载模板替换，而不是仅依赖于正在加载的集合的部分，即tabsTable模板。

如何才能使加载模板仅显示在嵌套模板上，以便仍然显示所有不依赖于正在加载的集合的html（标题，包装html等等）？

Answer 1

您可以使用waitOn而不是在路由器中使用带有loadingTemplate的subscriptions，它会为您提供ready calllback，您可以使用它来隐藏视图中的加载模板。

Router.route('myTabs', {
path: '/mytabs',
layoutTemplate: 'dashboardLayout',
loginRequired: 'entrySignIn',
subscriptions: function() {
  this.subs = Meteor.subscribe("mytabs", Meteor.userId());
},
data: function() {
  return {
    tabs: Tabs.find(),
    ready: this.subs.ready
  };
},
onAfterAction: function() {
  SEO.set({
    title: 'My Tabs | ' + SEO.settings.title
  });
}

}）;

然后在你看来

<template name="myTabs">
  <div class="my-tabs">

    <!-- ... -->

    {{#unless ready}}
       {{> loadingTemplate}}
    {{else}}
       {{> tabsTable}}
    {{/unless}}

  </div>
</template>

在部分模板上显示加载指示器

1 个答案: