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端點。 如果您可以重構檢索聯系人列表的方式，則可以得到一種類似於流星的結構，並具有所有優點（實時更新，操作客戶端數據的靈活性等）。