Blaze模板遍历对象

Question

我正在尝试遍历blaze模板（流星）中的对象，在控制台中我可以看到数据，但模板上什么也看不到。如何使它正常工作？ #each不起作用，arrayify也不起作用。

---

从评论中添加到这里：

{{#each contactList}} 
 <tr class="clickable" name="edit-contact" >
   <td>{{name}} </td>
   <td>{{email}} </td>
   <td>{{title}}</td>
   <td>{{phone1}}</td>
   <td>{{phone2}}</td>
   <td>{{phone3}}</td>
 </tr>
{{/each}}

JS：

contactList: function() { 
  $.ajax({ 
    url: Meteor.absoluteUrl()+'contacts/get_by_company/'+Session.get(‌​'company_id'),
    type: 'GET',
    error: function() { callback(); }, 
    success: function(res) { console.log(res); return res; }, 
  });
}

Answer 1

要回答您的主要问题，您的模板未迭代的原因是因为您的contactList函数只是不返回任何内容。 即使它确实返回了某些内容，由于您的方法，它仍然可能无法正常工作。 不幸的是，解决此问题的方法不仅仅是通过添加简单的return语句，而是更改了整个方法。

首先，我强烈建议您从头到尾阅读并遵循Blaze教程 ，然后再返回您的项目。 根据您共享的示例代码，很明显您误解了大多数Meteor基础知识（这很可惜，因为Meteor是一个功能非常强大且令人愉悦的框架）。 希望我能帮忙解决一些问题，但是绝对重要的是在尝试加入之前了解流星的工作原理。

我在这里看到的最大问题是您正在定义API端点并从前端使用它们。 尽管在其他框架/技术中这是相当正常的方法，但是服务器和客户端之间的关系在Meteor中是完全不同的。 实际上如此不同，仅举一个例子就可以证明这种不同。

根据您在问题中提供的内容，我重新编写了所有内容以解释如何在Meteor中解决此问题。

首先是模板定义（此处无实际变化）。

<template name="manageContacts">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Title</th>
        <th>Phone 1</th>
        <th>Phone 2</th>
        <th>Phone 3</th>
      </tr>
    </thead>
    <tbody>
      {{#each contact in contactList}} 
      <tr class="clickable" name="edit-contact" >
        <td>{{contact.name}}</td>
        <td>{{contact.email}}</td>
        <td>{{contact.title}}</td>
        <td>{{contact.phone1}}</td>
        <td>{{contact.phone2}}</td>
        <td>{{contact.phone3}}</td>
      </tr>
      {{/each}}
    </tbody>
  </table>
</template>

然而，下一部分是完全不同的。 请注意，我实际上不建议在同一文件中合并仅服务器和客户端的代码，但在这种情况下我这样做是为了节省空间。

const Contacts = new Mongo.Collection('contacts');

if (Meteor.isServer) {
  Meteor.publish('contacts', function() {
    return Contacts.find();
  });
}

if (Meteor.isClient) {
  Template.manageContacts.onCreated(function() {
    Meteor.subscribe('contacts');
  });

  Template.manageContacts.helpers({
    contactList: function() {
      return Contacts.find({
        company_id: Session.get(‌​'company_id')
      });
    }  
  });
}

我们在这里要做的是创建一个联系人mongo集合，该集合将存储所有联系人数据。 然后，我们在服务器上定义一个发布功能，该功能将所有联系人数据发布到客户端。 从客户端（例如模板），我们订阅发布（这是模板获取其数据的方式），并向模板提供帮助函数（ contactList ），以返回mongo游标。 当然，Blaze将能够遍历光标，并且我们所有的联系人都将在屏幕上呈现。

Answer 2

您的contactList助手没有为您提供所需的联系人列表的直接原因是您调用了异步函数（ $.ajax ），并且在该调用之后不返回任何内容。

请参阅如何从异步调用返回响应？

流星不知道您的异步调用何时完成，也不知道其结果。

如果您确实需要保留AJAX调用，则可以将结果存储在ReactiveVar并在您的帮助器中读取。 Meteor 知道，只要在该辅助函数中更新了反应性源，它就会自动重新运行您的辅助器 。 因此，模板到达时将自动接收结果。

import { ReactiveVar } from 'meteor/reactive-var'

var contacts = new ReactiveVar();

Template.templateName.onCreated(function () {
    $.ajax({ 
        url: Meteor.absoluteUrl()+'contacts/get_by_company/'+Session.get(‌​'company_id'),
        type: 'GET',
        error: function() { callback(); }, 
        success: function (res) {
            console.log(res);
            contacts.set(res); // Update the reactive var.
            return res; // Useless.
        }
    });
});

Template.templateName.helpers({
    contactList: function () {
        return contacts.get(); // Will get updated later on and Meteor will automatically refresh the helper.
    }
});

话虽如此，@ jordanwillis指出，在Meteor中几乎不需要REST端点。 如果您可以重构检索联系人列表的方式，则可以得到一种类似于流星的结构，并具有所有优点（实时更新，操作客户端数据的灵活性等）。