Meteorjs 数据数组在第一个模板渲染时未渲染答案

【问题标题】：Meteorjs Data array not rendered at first template renderedMeteorjs 数据数组在第一个模板渲染时未渲染
【发布时间】：2017-02-08 00:29:06
【问题描述】：

我正在使用 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}}

我确定可以用 Blaze 的{{>TemplateDynamic }} 空格键切换视图。

【问题讨论】：

你能发布你的完整代码吗？您是否通过模板助手公开data.trainers？如果不是，则模板不知道从哪里获取该数据。
嗨 maxko87。由于某些专业原因，我无法发布所有代码。不，我的 data.trainers 没有通过模板助手公开，我试图拥有它，这并没有改变任何东西。就像我说的，在第一次渲染时，页面不显示任何数据。但是在第二次渲染时，这里有，我显示了所有数据。（并且不要在模板助手中访问它......）。有什么建议吗？
我有一个模板助手可以将我的数据从客户端检索到模板中。同样的问题，第一次渲染没有数据，然后切换模板，数据渲染后...建议？
我猜这与 Algolia 的客户端缓存有关，尽管我没有深入研究代码来测试它的行为。一个合理的解释是，当数据在本地缓存中时，回调是同步调用的，因此在data函数返回之前填充了data.trainers。在第一次渲染期间情况并非如此，并且该属性在渲染时仍然是一个空数组。
我尝试添加一个var canRender = false，并在加载所有数据时将其设置为true。如果 canRender != true，则没有模板的渲染。但是还是不行。。

标签： javascript meteor meteor-blaze

【解决方案1】：

根据定义函数的位置，您可以使用ReactiveVar 并将其设置为data 函数中的数据，ie 而不是返回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，它将被更新并重新渲染。

【讨论】：