Question

我的client/main.js包含以下代码：

Template.hello.onCreated(function helloOnCreated() {
  // counter starts at 0
  this.counter = new ReactiveVar(0);
  var token = Meteor._localStorage.getItem("token");
  var result = HTTP.call('GET', 'http://faa22147.ngrok.io/auth/users', {
    headers: {
      "Content-type": "application/json",
      'Authorization': "Bearer " + token
    }
  }, function (error, result) {
    if (!error) {
      console.log(result.data);
      this.users = result.data;
    }
    console.log(error.response.content);
  });
});

result.data正确地从API返回了该对象。

模板非常简单，但响应没有返回到模板。

<template name="hello">
  <button class="btn btn-primary">Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
  {{#each users}}
    {{>user}}
  {{/each}}

</template>

<template name="user">
  {{name}}  
</template>

Answer 1

reactive computation is invalidated。

重新运行模板助手

ReactiveVar是一个被动数据源，在其上调用get()会创建一个reactive dependency。当在模板助手的上下文中完成此操作时，它会创建一个反应计算来侦听其依赖项的失效。

当您将值set()转换为其他内容时，会发生此失效，这会导致帮助程序重新运行并更新模板。

Template.hello.onCreated(function() {
  this.users = new ReactiveVar(null); // (1) initialize to null, so that we can tell when loading
  const token = Meteor._localStorage.getItem("token");

  HTTP.call('GET', 'http://faa22147.ngrok.io/auth/users', {
    headers:{
      "Content-type": "application/json",
      "Authorization": `Bearer ${token}`,
    }}, (e, r) => {
      if (!e) {
        this.users.set(r.data); // (2) set the reactive var to trigger a reactive computation
      }
      // todo: handle error case
    });
});

Template.hello.helpers({
  users() {
    return Template.instance().users.get(); // supplies the reactive variable to the template
  },
});

我为loading...尚未设置的案例添加了users文字。当users助手失效（设置为数组）时，它会重新运行，users现在是真的，并且内部each被触发。

请注意，这不会处理error案例，因此如果HTTP调用失败，则会卡在loading...。

<template name="hello">
  {{#if users}}
    {{#each users}}
      {{>user}}
    {{/each}}
  {{else}}
    loading...
  {{/if}}
</template>

如何将http.call结果传递给模板？

1 个答案: