在第一个模板渲染时没有渲染数据数组

Meteorjs Data array not rendered at first template rendered

本文关键字：数据 数组 第一个      更新时间：2023-09-26

我正在研究Meteorjs中的一个项目，但是我在渲染一些数据时遇到了问题。

问题是:在第一个模板渲染时，没有html。然后我将模板切换到"MAP"视图并返回到我的"LIST"视图，现在有了包含不同训练器的html。

我有一个routeController，它做了一些额外的操作来从Algolia中获得一些data，并将其推入data.trainers数组。

例如(在trainers_controller.js中):

data: function() {
    var trainers_tab = [];
    // algolia
    var client = algoliasearch('XXXXXXXXX', 'XXXXXXXXXX');
    var index = client.initIndex('myindex');
    if(Meteor.user()) {
        tab = Trainers.find({});
        tab.forEach(function(trainer) {
            index.getObject(trainer.doctor_id, function (err, content) {
                if (err) {
                    console.error(err);
                    return;
                }
                // geoloc address
                // TODO : retrieve training exact address
                // push to array
                trainers_tab.push({
                    objectID: content.objectID,
                    name: content.name,
                    city: content.city,
                    speciality: content.speciality,
                    photo: content.photo,
                    about: content.about,
                    email: content.email,
                    phone: content.phone
                    //address:
                });
            });
        });
    }

    var data = {
        params: this.params || {},
        trainers: trainers_tab
    };
return data;
}

我正好有我需要的data.trainers .

接下来，我尝试用

的基本方法将训练器渲染到我的template中
{{#each trainer in trainers}}
     Do some stuff in html yeah !
{{/each}}

我决定并且可以用火焰的{{>TemplateDynamic }}空格键切换视图

根据您的函数定义的位置，您可以使用ReactiveVar并将其设置为data函数中的数据，即。不是返回data，而是将对象设置为ReactiveVar:

Template.foo.onCreated(function() {
  this.myData = new ReactiveVar(null);
});
Template.foo.onRendered(function() {
  // Run your data function here
  const data = {
    params: this.params || {},
    trainers: trainers_tab
  };
  this.myData.set(data);
});

最后，使用帮助器检索数据:

Template.foo.helpers({
  data: function() {
    return Template.instance().myData.get();
  },
});

这样，如果你的模板在数据被检索之前呈现，它将在myData在你的函数中设置后更新并重新呈现。

相关文章：