meteor - 基本模式 : Populate a template with JSON from an external URL in Meteor

Question

我正在努力找出用来自 Meteor 中外部 API 调用的数据填充模板的基本模式。

这些是游戏中的元素

一个全新的 Meteor 项目，通过运行 meteor create monkeyproject 创建

返回 JSON 数组的外部 API 的 URL。假设它是 example.com/api/getmonkeys .它返回一组猴子，每个猴子都有不同的 name .

一个名为 monkeyTemplate 的 Handlebars 模板与 {{#each}}环形。让我们说它是这样的:

<template name="monkeyTemplate">
    {{# each monkeys}}
        One of our monkeys is named {{name}}. <br>
    {{/each}}
    <input type="button" id="reload" value="Reload monkeys" />
</template>

我想要发生的事情

当页面加载时填充 monkeyTemplate与来自我们外部 URL 的猴子。

当用户单击按钮时，再次调用外部 URL 以重新加载猴子。

问题

在 Meteor 中执行上述操作的标准模式是什么？ 冒着把问题弄乱的风险，我将包括一些起点，据我所知。

我们可以使用从 Template.monkeyTemplate.monkeys 返回的任何内容填充模板。功能。考虑到页面将在外部请求完成之前加载，我们如何用来自外部 URL 的内容填充它？

我们可以通过使用 Meteor.HTTP.call("GET", "http://example.com/api/getmonkeys", callback ) 来获取我们的 JSON。 .我们把这个请求放在哪里，在这种情况下我们在回调函数中放了什么？

我们可以使用 Meteor.isServer 控制服务器端发生的事情和客户端发生的事情。/Meteor.isClient条件，或者将我们的代码放入名为 client 的文件中和 server文件夹。服务器端与客户端需要哪些代码？

我们通过将函数附加到 Template.monkeyTemplate.events['click #reload'] 来确定单击按钮时会发生什么。 .在这种情况下，我们的回调函数会发生什么？

我将避免用我糟糕的代码来混淆问题。我不是在寻找任何人为我编写或重写应用程序——我只是在寻找指南、标准模式、最佳实践和陷阱。希望这对其他初学者也有启发意义。

Answer 1

我不确定这是否是“标准”模板，但它很好地达到了目的。

为模板设置两个数据助手，monkeys和 loading .第一个将在获取后显示实际数据，后者将负责通知用户数据尚未获取。

为这些助手设置依赖项。

在 created模板功能，设置loading帮助器为 true 并使用 HTTP 获取数据称呼。

在回调中，设置模板数据并触发依赖项。

html

<template name="monkeys">
   {{#if loading}}
       <div>Loading...</div>
   {{/if}}
   {{#if error}}
       <div>Error!</div>
   {{/if}}
   {{#each monkeys}}
       <div>{{name}}</div>
   {{/each}}
   <div><button class="monkeys-reloadMonkeys">Reload</button></div>
</template>

js

var array = null;
var dep = new Deps.Dependency();

Template.monkeys.created = function() {
    reloadMonkeys();
};

Template.monkeys.events({
    'click .monkeys-reloadButton': function(e,t) {
         reloadMonkeys();
    };
});

var reloadMonkeys = function() {
    array = null;
    dep.changed();
    HTTP.get('http://example.com/api/getmonkeys', function(error, result) {
        if(!error && result) {
            array = result;
        } else {
            array = 0;
        }
        dep.changed();
    });
};

Template.monkeys.monkeys = function() {
    dep.depend();
    return array ? array : [];
};

Template.monkeys.loading = function() {
    dep.depend();
    return array === null;
};

Template.monkeys.error = function() {
    dep.depend();
    return array === 0;
};