#each helper 填充一个 table

Question

我是 meteor 的新手，我正在尝试使用 #each 遍历游标来填充 table。这是我的代码：

<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

据我所知，您正在订阅您的数据，但您不是 "telling" 您的模板，订阅已完成，应该重新绘制。

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

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

接下来添加一个助手，returns '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>

#each helper 填充一个 table

#each helper to populate a table

meteor

spacebars

相关资源