【问题标题】:Is it possible to switch collection focus in Meteor spacebars templates?是否可以在 Meteor 空格键模板中切换收藏焦点?
【发布时间】:2014-12-21 21:37:26
【问题描述】:

我正在尝试在 Meteor 空格键模板中显示一些关系数据。具体来说,我有两个系列,位置和天气。它们看起来像这样:

Location {
  _id: 'full-name',
  title: 'Full name',
  lat: '123.456',
  long: '123.456',
  order: 1
}

Weather {
  locName: 'full-name', // this name always matches a location _id
  temperature: '41.3'
}

我想在一个页面上显示来自这两个集合的信息。这样我就可以显示每个位置的最新天气(每页有 4-20 个)。为此,我在服务器端发布了两个集合的 Mongo 请求:

Meteor.publish('allLocations', function() {
    return [
        Locations.find({}, { sort: { order: 1 } }),
        Weather.find({}) // The weather 
    ]    
});

然后我在我的路由器 (iron-router) 中订阅此出版物:

Router.map(function() {
    this.route('locations', {
        waitOn: function () {
            return Meteor.subscribe('allLocations');
        }
    }
});

但是,当我进入我的空格键模板时,我被卡住了。我不知道在空格键中切换集合焦点的语法。

这是我试图解析的模板的伪代码,但我知道这目前不起作用。

<template name="locations">
  <div class="locations-grid">
    {{#each locations}}
      <div class="location {{_id}}">
        This is the location template
        <h1>{{title}}</h1>
        {{#each weather}}
          <!-- Trying to pass the _id along to the weather template for filtering -->
          {{> weather _id}}
        {{/each}}
      </div>
      {{/each}}
    </div>
</template>

<template name="weather">
  This is the weather template
  {{#with weather}}
    <!-- Ideally, we've now switched contexts to the weather collection -->
    <h2>Temperature: <div class="temp">{{temperature}}</div></h2>
  {{/with}}
</template>

所以我的问题是,我在哪里告诉空格键将上下文切换到天气集合?如何将 _id 变量传递给天气模板,以便从集合中选择正确的数据?我知道我在这里错过了一大步,我只是不知道要检查流星空间的哪个部分。我知道我可能需要为天气模板指定订阅,但我不确定在哪里做,因为它不是真正的路线,因为它没有自己的页面。它只是作为位置模板中的子模板存在。

感谢您提供任何提示或可能的重组建议。

【问题讨论】:

    标签: javascript mongodb meteor spacebars


    【解决方案1】:

    在我们开始之前,请阅读A Guide to Meteor Templates & Data Contexts - 这将正确地引导您了解#each 块内的上下文。

    您的目标是将正确的weather 文档加入到它们对应的location 文档中。这很容易通过为这两种类型引入子模板来实现。让我们从顶级模板开始:

    <template name="locations">
      <div class="locations-grid">
        {{#each locations}}
          {{> location}}
        {{/each}}
      </div>
    </template>
    

    有一个像这样的locations 助手:

    Template.locations.helpers({
      locations: function() {
        return Locations.find();
      }
    });
    

    接下来,location 模板:

    <template name="location">
      <div class="location">
        <h1>{{title}}</h1>
        {{#each weathers}}
          {{> weather}}
        {{/each}}
      </div>
    </template>
    

    其中有一个像这样的weather 助手:

    Template.location.helpers({
      weathers: function() {
        return Weather.find({locName: this._id});
      }
    });
    

    这里的关键见解是location 模板的上下文是单个位置文档,因此weather 将仅返回 位置实例的天气文档。最后,您的天气模板可能如下所示:

    <template name="weather">
      <h2>Temperature: {{temperature}}</h2>
    </template>
    

    请注意,我们现在处于 weather 上下文中,因此不再需要 #with

    附注 - 在这种情况下,在您的发布者中使用排序具有 no affect

    【讨论】:

    • 谢谢。这很有帮助。我还阅读了 Discover Meteor 上的链接帖子。我仍然对一个变化感到困惑。为此,我只能将 Location 集合发布到位置模板。如何告诉位置模板订阅哪个集合?我习惯在路由器中这样做,但由于这个位置没有路由,我不确定订阅会去哪里
    • 看起来您不需要更改任何内容。订阅并不特定于模板 - 它们是让服务器将数据推送到客户端数据库 (minimongo) 的请求。当您导航到顶级模板时,您的路由器订阅allLocations,因此所有的天气和位置数据将可用于所有模板。这有意义吗?
    • 当我在 allLocations 出版物中同时保留 Location 和 Weather 集合时,#each Weather 返回 this 作为 Locations 对象,但还包括 Weather 条目。
    • 已修复!问题不在出版物中,而在于重用 weather 作为帮助程序和模板名称。让我知道更新的代码是否适合您。如果没有,我有一个 repo,展示了我可以发布的所有内容。
    • 嘘!那解决了它。我看到了天气(集合光标)和天气(子模板)之间的区别。非常感谢您花时间解释这一点并与我一起讨论细节。
    猜你喜欢
    • 2019-09-01
    • 2015-08-22
    • 2015-10-10
    • 2014-12-24
    • 2015-09-20
    • 2018-07-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多