Question

在我使用MeteorJS的应用程序中，我有一个情况，我必须订阅＆＃34;多个方面＆＃34;一个集合。

我有一个名为Invitations的集合，在主页上，我订阅了一个发布Invitations InvitedUser的出版物，其中Invitations是当前用户。

然后在模态对话框中，我想管理当前用户发送的那些Invitations。我不想仅在此对话框上订阅已发送var subscriptionHandle; Template.invitationsModal.helpers({ invitations: function() { var activeGroupId = Session.get('activeGroupId'); var filter = activeGroupId ? {invitedBy: Meteor.user()._id, group: activeGroupId} : {}; return Invitations.find(filter); } }); Template.invitationsModal.rendered = function() { $('#invitationsModal').off('shown.bs.modal').on('shown.bs.modal', function(e) { var activeGroupId = Session.get('activeGroupId'); subscriptionHandle = Meteor.subscribe('sentInvitations', activeGroupId); }); $('#invitationsModal').off('hidden.bs.modal').on('hidden.bs.modal', function(e) { subscriptionHandle.stop(); }); };的更改。

因此，我决定在向用户显示对话框时手动订阅发布，并在模式关闭时停止此订阅。

模态对话框背后的代码如下所示：

invitations

（我遗漏了不重要的部分。）

在模板中，我只是遍历<template name="invitationsModal"> <div id="invitationsModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" class="form-horizontal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Invitations</h4> </div> <div class="modal-body container-fluid"> {{#each invitations}} {{> invitationRow}} {{/each}} <div class="form-group"> <div class="col-xs-offset-2 col-xs-6"> <input type="text" class="form-control" name="name" placeholder="Name or email"> </div> <div class="col-xs-2"> <input type="submit" class="btn btn-default button-add" value="Invite" /> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </form> </div> </div> </div> </template>帮助器：

{{> invitationsModal}}

此模板随后包含在我的主页中：

activeGroupId

当我第一次加载页面时，会话变量activeGroupId为空，因此将错误的数据加载到隐藏模态中。当我向用户显示模态时，我将invitations设置为某个值，所以：

由于此更改，{{1}}帮助程序再次执行，现在我们返回活动组的有效邀请列表。
DOM在模态内更新，以反映1中的变化。）

现在有了一个有趣的部分：整个解决方案在Chrome和Firefox上运行良好，但并不总是在IE上运行。

在IE上有一种情况，当1.）步骤正确运行，但2.）根本就没有执行。

第一次打开模态时就是这种情况。这次DOM包含错误的，未经过滤的集合。

当我第二次关闭并打开模态时（没有在浏览器中刷新页面），它再次正常工作。

我不知道会导致这种行为的原因。它可能是Meteor中的一个错误，还是这样？

（在IE11中测试）

Answer 1

对Deps.flush()的调用神奇地解决了这个问题 - 这是向用户显示对话框的事件处理程序：

'click .menu-command-invitations': function(e) {
    Session.set('activeGroupId', this._id);
    Deps.flush(); // without this, it won't work in IE
    $('#invitationsModal').modal('show');
    e.preventDefault();
}

来自Meteor docs：

Deps.flush强制完成所有待处理的响应更新。例如，如果事件处理程序更改了将要的Session变量导致部分用户界面重新渲染，处理程序可以调用刷新以立即执行重新呈现然后访问结果DOM。

虽然我不知道为什么我需要调用它以及为什么它只能在IE下工作。

我正在同一个应用程序中的其他事件处理程序中读取和编写会话变量，并且这些变量在IE中完美运行。

流星视图不会在IE上更新

1 个答案: