Meteor #each 和会话数据答案

【问题标题】：Meteor #each and session dataMeteor #each 和会话数据
【发布时间】：2016-01-18 19:06:56
【问题描述】：

我有一个基于异步信息的模板，所以我使用Session 数据以便在数据到达时反应性地呈现视图。比如：

item.html:

<template name="item">
    {{#with item}}
        {{itemInformation.name}}
    {{/with}}
</template>

item.js

Template.item.created = function () {
    getItemData(this.data.item.id, function(data) {
        Session.set("itemInformation", data);
    });
}

Template.item.helpers({
    itemInformation: function() {
        return Session.get("itemInformation");
    }
});

如果我有一个项目模板处于活动状态，这种方法似乎可以正常工作。但是，如果我在 #each 循环中使用这种方法，我会在会话数据上遇到冲突。

我可以使用“本地”Session 数据吗？
当基于 #each 循环中的异步数据时，重新渲染视图的正确方法是什么？

【问题讨论】：

请参阅this post 了解有关此问题的完整讨论。

标签： javascript meteor

【解决方案1】：

您可以在 onCreated 模板回调 (self.localSession = new ReactiveDict ()) 中创建一个 ReactiveDict (https://atmospherejs.com/meteor/reactive-dict - Session 实际上在其实现中使用它)，并使用它来代替 Session (self.localSession.set('itemInformation', data))。您可以通过以下方式在模板助手中访问它：Template.instance().localSession.get('itemInformation')。

如果你只是想在字典中存储一项，你也可以以同样的方式只使用单个 ReactiveVar (https://atmospherejs.com/meteor/reactive-var)。

就像您注意到的那样，您需要在一些响应式源中设置异步内容，您可以使用我上面描述的构造。

您的代码：

Template.item.created = function () {
     var self = this;
     self.localSession  = new ReactiveDict ();
     getItemData(self.data.item.id}, function(data) {
         self.localSession.set("itemInformation", data);
    });
}

Template.item.helpers({
    itemInformation: function() {
        return Template.instance().localSession.get("itemInformation");
    }
});

【讨论】：

效果很好，而且比我尝试的滥用 SessionData 的方法要好得多。

【解决方案2】：

Session 是一个global named ReactiveDict，当您想在应用程序的各个部分之间共享数据时使用。由于它是一个全球性的，你可能不想把它弄得太乱。

为什么还要使用ReactiveDict？如果您打算每个模板只存储一个项目，那么ReactiveVar 是显而易见的方法！另外，ReactiveVar 可以包含任何东西，而ReactiveDict instances may only contain EJSON-able values。

因此，

Template.item.created = function () {
    getItemData(this.data.item.id, data => {
        this.item = new ReactiveVar(data);
    });
}

Template.item.helpers({
    itemInformation: () => Template.instance().item
});

请注意，每个模板将根据其自己的ReactiveVar 实例的后续set 进行更新。如果您希望使用getItemData 定期更新它们，您没有太多选择。
由于它是一种异步方法，因此您不走运。最好的办法是定期使用Meteor.setInterval 和item.set() 在回调中轮询数据。我为同步 getter 做了类似的here，你必须调整实现。

如果您使用上述轮询策略，请不要忘记在模板的onDestroyed 回调中Meteor.clearInterval。

【讨论】：