5

我正在努力找出使用来自 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 的内容填充它？

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

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

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

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

4

1 回答 1

2

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

  • 为模板设置两个数据助手，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;
};
于 2013-10-18T07:48:50.847 回答