Question

Я довольно плохо знаком с метеором и пытаюсь перебрать курсор, используя #each для заполнения таблицы. Вот мой код:

<template name="choral">
<div class="container" style="padding-top: 25px">
  <div class="table-responsive">
    <form id="orderForm">
    <table class="table table-borderless table-dark">
      <thead class="thead-light">
        <tr>
            <th>Title:</th>
            <th>See the Music:</th>
            <th>Hear the Music:</th>
            <th>Format:</th>
            <th>Price (per copy):</th>
            <th>Quantity:</th>
        </tr>
      </thead>
      <tbody>
         {{#each piece in pieces}}
        <tr>
            <td id="name">{{piece.name}}</td>
            <td id="pdf">PDF</td>
            <td id="audio">AUDIO</td>
            <td id="format">FORMAT</td>
            <td id="price">{{piece.score}}</td>
            <td id="qty"><input type ="number" name ="quantity" min="5"></td>
        </tr>
        {{/each}}
      </tbody>
      <tfoot>
            <tr>
                <td colspan="5"></td>
                <td><button class="button" type ="submit">Add to Cart</button></td>
            </tr>
        </tfoot>
  </table>
  </form>
  </div>
</div>

мой JS.

Template.choral.helpers({
  pieces: function(){
    return choralm.find({});
  }
});

Я вывожу пустую строку между тегом #each. Я публикую коллекцию на стороне сервера и подписываюсь. Я просто не уверен, где искать. Есть идеи? Моя публикация и подписка:

Meteor.publish('choralList', function() {
  return choralm.find();
});

Template.choral.onCreated( function(){
  Meteor.subscribe('choralList');
});

Jankapunkt · Answer 1 · 13 января 2019

Насколько я вижу, вы подписываетесь на свои данные, но вы не "говорите" своему шаблону, что подписка завершена и она должна перерисоваться.

Таким образом, ваш шаблон немедленно визуализируется, пока подписка продолжается, и, таким образом, использует все еще пустые данные сбора.

Чтобы сообщить вашему шаблону, что данные были обновлены, вы можете использовать его внутренний Tracker и сохранить информацию в реактивном источнике данных (для моего примера я использую ReactiveDict вместо ReactiveVar).

import { ReactiveDict } from 'meteor/reactive-dict';

Template.choral.onCreated( function (){
  // inside onCreated, this refers to the
  // current template instance 
  const instance = this;

  // let's attach a ReactiveDict to the instance
  instance.state = new ReactiveDict();

  // use the internal Tracker
  instance.autorun(() => {
    // subscribe and store a flag, once ready
    const choralListSub = Meteor.subscribe('choralList');
    if (choralListSub.ready()) {
      instance.state.set('subscriptionComplete', true);
    }
  });
});

Затем вы добавляете помощника, который возвращает реактивное значение для 'subscriptionComplete':

Template.choral.helpers({
  pieces(){
    return choralm.find({});
  },
  subscriptionComplete() {
    // we use 'state', our ReactiveDict,
    // which we added as prop in onCreated
    return Template.instance().state.get('subscriptionComplete');
  }
});

И, наконец, мы позволяем нашему шаблону рисовать данные после завершения нашей подписки. До завершения подписки (обратите внимание на блок {{else}}), мы выводим сообщение о статусе загрузки:

<template name="choral">
<div class="container" style="padding-top: 25px">
  {{#if subscriptionComplete}}
  <div class="table-responsive">
    <form id="orderForm">
    <table class="table table-borderless table-dark">
      <thead class="thead-light">
        <tr>
            <th>Title:</th>
            <th>See the Music:</th>
            <th>Hear the Music:</th>
            <th>Format:</th>
            <th>Price (per copy):</th>
            <th>Quantity:</th>
        </tr>
      </thead>
      <tbody>
         {{#each piece in pieces}}
        <tr>
            <td id="name">{{piece.name}}</td>
            <td id="pdf">PDF</td>
            <td id="audio">AUDIO</td>
            <td id="format">FORMAT</td>
            <td id="price">{{piece.score}}</td>
            <td id="qty"><input type ="number" name ="quantity" min="5"></td>
        </tr>
        {{/each}}
      </tbody>
      <tfoot>
            <tr>
                <td colspan="5"></td>
                <td><button class="button" type ="submit">Add to Cart</button></td>
            </tr>
        </tfoot>
  </table>
  </form>
  </div>
  {{else}}
  <div>Loading template...</div>
  {{/if}}
</div>
</template>