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而不是{{1 }}。

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

#eachhelper填充表格

1 个答案:

相关资源