Как передать результаты http.call в шаблон? - PullRequest
Новая
       8

Как передать результаты http.call в шаблон?

0 голосов
/ 27 апреля 2018

My 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>

1 Ответ

0 голосов
/ 28 апреля 2018

Помощники шаблонов запускаются повторно, когда реактивное вычисление признано недействительным .

A 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>
...