Question

我有一个基于异步信息的模板，所以我使用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循环中的异步数据重新呈现视图的正确方法是什么？

Answer 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");
    }
});

Answer 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
});

请注意，每个模板都会根据自己的set实例的后续ReactiveVar进行更新。如果您希望定期使用getItemData更新它们，则没有多少选项因为它是一种异步方法，所以你运气不好。您最好的选择是在回调中使用Meteor.setInterval和item.set()生成的数据定期轮询数据。我为同步getter做过类似here的事情，你必须调整实现。

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

Meteor #each和会话数据

2 个答案: