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

Question

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

这些是游戏中的元素

1. 一个新的Meteor项目,由跑步创建 meteor create monkeyproject
2. 返回JSON数组的外部API的URL.让我们说吧example.com/api/getmonkeys.它返回一组猴子,每个猴子都有不同的name.

3. 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 填充猴子.
• 当用户单击该按钮时,再次调用外部URL以重新加载猴子.

这个问题

在Meteor中执行上述操作的标准模式是什么？冒着弄乱这个问题的风险,我将包括一些起点,正如我所理解的那样.

• 我们可以使用从Template.monkeyTemplate.monkeys函数返回的任何内容填充模板.如果页面将在外部请求完成之前加载,我们如何用外部URL中的内容填充它？

• 我们可以通过使用获得我们的JSON Meteor.HTTP.call("GET", "http://example.com/api/getmonkeys", callback ).我们在哪里提出这个请求,在这种情况下我们将什么放入回调函数？

• 我们可以通过使用Meteor.isServer/ Meteor.isClientconditions,或者将我们的代码放入被调用的文件client和server文件夹来控制服务器端发生的事情以及客户端发生的事情.服务器端和客户端需要什么代码？

• 我们确定通过附加功能单击按钮时会发生什么 Template.monkeyTemplate.events['click #reload'].在这种情况下,我们的回调功能是什么？

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

Answer 1

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

• 为模板设置两个数据助手，monkeys并且loading. 第一个将在获取数据后显示实际数据，后者将负责通知用户数据尚未获取。
• 为这些助手设置依赖关系。
• 在created模板的函数中，将loadinghelper 设置为 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;
};