javascript - 如何使用 Meteor.js 中的模板助手遍历对象中的两个数组

Question

我的 HTML 类似于这个

<template name="stop">  
   {{#each thumb}}

  <tr>
    <td class="image" ><img src="{{this.data}}"></td>
    <td>
     <center style="float:right; margin-bottom: 25%;">    
       <h2> Do you like this product? </h2>

       <h2>{{this.text}}</h2></center>
    </td>
  </tr>
  {{/each}}

</template>

这个模板是指我的模板助手，看起来像这样

Template.stop.helpers( {
        'thumb': function(data) {
            console.log(z);
            return tweetImages.findOne()
        })

tweetImage.findOne() 输出这个

Object {_id: "1", data: Array[7], text: Array[7]}

每次模板运行时，我都尝试遍历两个数组中的每个项目，但每次都会输出每个数组的所有 7 个值。我知道这是某个地方需要的上下文变量，但我无法解决。有人有什么想法吗？

Answer 1

findOne 仅返回一个元素，因此您的 each 仅迭代一次。您需要一个嵌套的 each 来遍历 data 或 text 属性，如下所示:

{{#each thumb}}
  ...
  {{#each data}}
    //but you won't be able to get 'text' here
  {{/each}}
  ...
{{/each}}

但是如您所见，您将无法使用此方法访问数据和文本数组。也许您可以修改助手返回的数据，使其具有以下形式:

[
  {data: ..., text: ...},
  {data: ..., text: ...},
  {data: ..., text: ...},
  ...
]

所以你可以这样做:

{{#each thumb}}
  ...
  {{data}}
  {{text}}
  ...
{{/each}}

要重写您的数据，您可以使用 for 循环:

Template.stop.helpers({
  'thumb': function() {            
    var result = tweetImages.findOne();
    var newResult = [];
    for(var i = 0; i < result.data.length; i++) {
      newResult[i] = {data:result.data[i], text:result.text[i]};
    }
    return newResult;
  }
});