#每个帮助器填充一个表

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

Answer 1

据我所知，您正在订阅您的数据，但您并没有“告诉”您的模板，订阅已完成并且应该重绘。

因此，您的模板会在订阅进行时立即呈现，因此会使用尚未显示的集合数据。

为了通知您的模板数据已更新，您可以使用它的内部 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>

相关资源

TemplateInstance.autorun

http://blazejs.org/api/templates.html#Blaze-TemplateInstance-autorun

https://docs.meteor.com/api/tracker.html

反应式商店

https://guide.meteor.com/data-loading.html#stores

订阅准备就绪

https://guide.meteor.com/data-loading.html#readiness

帮助者

http://blazejs.org/guide/spacebars.html#Built-in-Block-Helpers