Question

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

这些是游戏中的元素

通过运行meteor create monkeyproject
返回JSON数组的外部API的URL。我们说它是example.com/api/getmonkeys。它返回一组猴子，每个猴子都有不同的name。

名为monkeyTemplate且具有{{#each}}循环的Handlebar模板。我们就是这样说的：

<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以重新加载猴子。

问题

在Meteor中执行上述操作的标准模式是什么？如果我理解这些问题，可能会有一些起点，我会理解它们。

我们可以使用从Template.monkeyTemplate.monkeys函数返回的内容填充模板。 如果在外部请求完成之前加载页面，我们如何用外部URL中的内容填充它？
我们可以使用Meteor.HTTP.call("GET", "http://example.com/api/getmonkeys", callback )获取我们的JSON。 我们在哪里提出此请求，以及在这种情况下我们将什么放入回调函数？
我们可以通过使用Meteor.isServer / Meteor.isClient条件或将我们的代码放入名为{{1}的文件中来控制服务器端发生的情况以及客户端发生的情况}和client个文件夹。 服务器端与客户端需要的代码是什么？
我们通过将函数附加到server来确定单击按钮时会发生什么。 在这种情况下，我们的回调功能是什么？

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

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;
};

基本模式：使用Meteor中的外部URL使用JSON填充模板

这些是游戏中的元素

我想要发生什么

问题

1 个答案: