javascript - Meteor模板更新不一致

Question

将 Meteor 与 blaze 模板和流路由器一起使用，我发现如果我创建一个新元素，则页面不会更新以显示它，但如果我删除相同的元素，它会立即消失。这是模板代码:

<template name="EditProject">
    ...
    {{#each currentCounts }}
        <div class="count-box">{{> CountDelete }}</div>
    {{/each}}
    ...
    <btn class="btn waves-effect waves-light h-button" id="add-count">Add Count</btn>
    ...
</template>

<template name="CountDelete">
    <div class="card blue-grey lighten-2 count-box">
        <div class="card-content white-text">
            <span class="card-title">
                {{ name }}
            </span>
            {{ notes }}
        </div>
        <div class="card-action">
            <btn class="btn waves-effect waves-light delete-count">
                <i class="mdi mdi-delete"></i>
            </btn>
            <a class="btn waves-effect waves-light" href="/edit_count/{{ _id }}">
                <i class="mdi mdi-pencil"></i>
            </a>
        </div>
    </div>
</template>

currentCounts 的来源是这样的:

Template.EditProject.helpers({
    currentCounts: function() {
        var projectId = FlowRouter.getParam('projectId');
        const project = Projects.findOne(projectId);
        var counts = Counts.find({
            _id: { $in: project.counts }
            },
            {
                sort: { sort_order: -1 }
            }
        );
        return counts;
    }
})

如上所述，单击 .delete-count 按钮会删除关联的计数，并且还会导致 UI 更新以显示该计数已消失。添加计数(通过点击#add-count)可以正确创建计数，但页面不会更新。有短暂的闪烁，但仅此而已，刷新页面会显示新的计数。有人能建议发生了什么事吗？

编辑:这是根据评论中的要求进行的订阅:

Template.EditProject.onCreated(function() {
    var self = this;
    self.autorun(function() {
        var projectId = FlowRouter.getParam('projectId');
        self.subscribe('single-project',projectId);
        self.subscribe('project-counts',projectId);
    })
})

进一步编辑:

首次访问此路由时，页面会按预期呈现，通过 {{#each currentCounts}} 显示多个计数的列表。如果我删除其中一个计数，它会立即从屏幕上消失，但如果我添加一个新计数，它直到刷新页面后才会显示。

另一个编辑:

按要求添加监听器和服务器发布代码(在 server/main.js 中)。奇怪的是，当再次启动应用程序时，一切都开始按其应有的方式运行，但几分钟之内，我所描述的相同行为又重新出现。

Meteor.publish('project-counts', function projectPublication(projectId) {
    let project = Projects.findOne({_id: projectId, knitter: this.userId});
    return Counts.find({_id: { $in: project.counts }});
});
Meteor.publish('single-project', function projectPublication(projectId) {
    return Projects.find({_id: projectId, knitter: this.userId});
});

'click #add-count'(event) {
    //TODO: Check for duplicate count name
    var projectId = FlowRouter.getParam('projectId');
    var countName = $('#new-count').val();
    var countNotes = $('#new-count-notes').val();

    if (!countName) {
        $("#errors-go-here").empty();
        Blaze.renderWithData(Template.EditProjectErrors, {
            errors: ['You must supply a name for the new count.']
        }, $("#errors-go-here")[0])
        $('.modal').modal();
        $('#validation-errors').modal('open');
        return;
    }

Template.EditProject.events({
    ...
    Meteor.call('projects.add-count',projectId,countName,countNotes, function(error) {
            if (error) {
                console.log("Count add error: " + error);
                Materialize.toast('Failed to add count \'' + countName + '\'!', 3000, 'orange darken-4');
                return false;
            } else {
                Materialize.toast('Count \'' + countName + '\' added!', 3000, 'blue-grey');
                $('#new-count').val(null);
                $('#new-count-notes').val(null);
                // Running this makes the missing count show up, but this is clearly not the right way to do it...
                //location.reload(); 
            }
        });
    },
    ...
)}



Template.CountDelete.events({
    'click .delete-count'(event) {
        var self = this;
        var projectId = FlowRouter.getParam('projectId');
        var countId = self._id;
        const count = Counts.findOne(countId);
        const name = count.name;

        Meteor.call('projects.delete-count',projectId,countId, function(error) {
            if (error) {
                console.log("Count add error: " + error);
                Materialize.toast('Failed to delete count \'' + name + '\'!', 3000, 'orange darken-4');
                return false;
            } else {
                Materialize.toast('Count \'' + count.name + '\' deleted!', 3000, 'blue-grey');
            }
        });

    },

})

更多信息:我发现页面加载后，它就会按照应有的方式运行。但是，如果重新加载，它就会开始出现异常行为。因此，我最初没有注意到发生了正确的行为，因为由于代码的更改，页面已被 Meteor 刷新。

Answer 1

为了完整起见，您可能还应该共享方法代码(即 'projects.add-count' 和 'projects.delete-count' )。

话虽这么说，我怀疑他们更新了 counts文档的数组字段 _id等于 projectId在Projects收藏。

在这种情况下，查看您的 'project-counts'出版物，我们看到它取决于 Projects.findOne查询，它在服务器端与标准 Meteor 不具有反应性。

因此，当您添加“计数”时会发生的情况是，一个新文档被添加到 Counts 中。收藏及其 _id很可能正确记录在项目的 counts 中字段，但这不会重新执行您的发布代码。因此，游标选择器查询保持不变，并且您的客户端不会在其 Counts 中收到任何修改。收藏。

假设您的方法代码已在客户端和服务器中加载，客户端将执行 stub /模拟，插入此新文档并在本地更新项目的 counts ，触发 UI 更新。

但是您的服务器也会执行该方法，这会导致发布内容没有变化，因此新文档位于 Counts 中不会发送给客户端，从而将其隐藏起来。这会产生您观察到的闪烁。

现在，当您删除 Counts 中的文档时，我们可以假设您将其从 Counts 中删除。集合，然后更新发布光标，这就是为什么您的 UI 正确反射(reflect)删除，即使发布查询选择器未更改。

最后，当您刷新页面时，您的发布代码将使用 Projects 中文档的最新版本完全重新评估。集合，这会导致正确的查询选择器，因此您的新光标现在包含 Counts 中新添加的文档.

那么为了解决您的问题，您应该尝试使用响应式(Reactive)联接或发布复合包。

例如请参阅https://stackoverflow.com/a/32920733/5108796 (Meteor.publish: publish collection which depends on other collection)