0

Meteor spacebars テンプレートにリレーショナル データを表示しようとしています。具体的には、Location と Weather の 2 つのコレクションです。それらは次のようになります。

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'
}

これら両方のコレクションの情報を 1 つのページに表示したいと考えています。各場所の最新の天気を表示できるように (1 ページに 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 変数を天気テンプレートに渡すにはどうすればよいですか? ここで大きな一歩を踏み外していることはわかっています。Meteor 空間のどの部分を調べる必要があるかわかりません。天気テンプレートのサブスクリプションを指定する必要があるかもしれないことはわかっていますが、独自のページがないため、実際にはルートではないため、どこでそれを行うべきかわかりません。これは、場所テンプレート内のサブテンプレートとして機能します。

ヒント、または再構築に関する可能な提案をありがとう。

4

1 に答える 1

1

始める前に、Meteor テンプレートとデータ コンテキストのガイド#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は不要になっていることに注意してください。

補足 - この場合、パブリッシャーでソートを使用しても影響はありません。

于 2014-10-26T17:51:51.143 に答える