Blaze 模板迭代对象

Question

我正在尝试迭代 blaze 模板 (meteor) 中的一个对象，在控制台中我可以看到数据但模板上什么也没有。我怎样才能让它工作？ #each 不工作，arrayify 也不工作。

---

从 cmets 添加到这里：

{{#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 Tutorial，然后再返回您的项目。 根据您分享的示例代码，很明显您误解了 Meteor 的大部分基础知识（这很遗憾，因为 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 集合，该集合将存储所有联系人数据。然后，我们在服务器上定义一个发布函数，将所有联系人数据发布到客户端。我们从客户端（例如模板）订阅发布（这是模板获取其数据的方式）并为返回 mongo 游标的模板提供帮助函数 (contactList)。 Blaze 当然可以遍历光标，我们所有的联系人都会在屏幕上呈现。

Answer 2

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

见How do I return the response from an asynchronous call?

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

如果您真的需要保留您的 AJAX 调用，您可以将结果存储在 ReactiveVar 中并在您的帮助程序中读取。 Meteor knows that it should automatically re-run your helper 每当在该辅助函数中更新反应源时。因此，您的模板会在结果到达时自动接收。

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 端点。如果您可以重构检索联系人列表的方式，您可以获得一个更像 Meteor 的结构，并具有它的所有优点（实时更新、在客户端操作数据的灵活性等）