流星：模态正在消失并锁定用户

Question

我正在尝试让模态始终与 Meteor 一起工作。当数据上下文值发生变化时，它们会出现消失的问题。我已经解决了这个问题的一部分，正如this question 所记录的那样，但现在它又回来了，并且当 surrounding 模板中的值发生变化而不是值 in em> 模板。

这是实际的模态：

<div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="paymentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="paymentModalLabel">Make a Payment</h4>
            </div>

            <div class="modal-body">
                {{> paymentModalBody}}
            </div>

            <div class="modal-footer">
                {{> paymentModalFeedback}}
            </div>
        </div>
    </div>
</div>

当值更改在其内部时（或者换句话说，当paymentModalBody 或paymentModalFeedback 具有更改值时，模式工作正常，因为这些模板重新渲染不会导致要重新渲染的主要模态元素），但是....

这发生在我的userView 模板中，该模板显示有关用户的信息（duh）。该模态处理与用户的支付交互，并调用Meteor.method 被称为...

makeBraintreePayment: function(saleObj) {
    var now = new Date();
    Gateway.transaction.sale(saleObj, Meteor.bindEnvironment(
        function (err, result) {
            if (result.success) {

                if (result.transaction.customer.id && saleObj.options.storeInVaultOnSuccess) {
                    Meteor.users.update(Meteor.userId(), {$set: { braintree_id: result.transaction.customer.id }});
                }

                var paymentId = Payments.insert({ ... });
                Meteor.users.update(Meteor.userId(), {$push: { 'payment_ids': paymentId }});

                return result.transaction.id;
            } else {
                throw new Meteor.Error(401, result.message);
            }
        },
        function(err) {
            console.log('bind failure: ' + err.message);
        }
    ));
}

现在又一次，所有这些工作都很好，但是，在付款并且模态显示成功消息后，一两秒钟后模态消失并只留下背景，锁定用户并使其有必要刷新页面。坏了。

我很清楚这是因为那些 Meteor.users.update 调用，因为它们正在更改 userView 模板的数据上下文，这导致模态模板被重新渲染。所以，我尝试使用preserve：

Template.userView.preserve(['#paymentModal', '.modal-dialog', '.modal-content', '.modal-header', '.modal-body', 'modal-footer', '.modal-title', '.close']);

还有这个：

Template.userView.preserve(['#paymentModal']);

都没有用。这应该是维护所有静态模态元素的 html，同时允许重新渲染它周围的所有内容，但事实并非如此。

发生了什么事？我该如何解决？

提前致谢！

附言

我一直在尝试通过使用更稳定的模态库bootboxjs 来解决这个问题，但我使用的是had a different problem with that。如果您能对其中任何一个提供一些见解，那就太棒了！

Answer 1

也将您的模态框放入 {{#isolate}} 块中。

{{#isolate}}
    <div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-
       ...
    </div>
{{/isolate}}

这样，如果在外部发生了一些变化，那么它内部和内部都会被忽略。

最好考虑升级到使用 Blaze RC（运行 meteor --release blaze-rc1 update），它使用细粒度的 DOM 修补来避免这个问题。并且与 Bootstrap 和其他 jquery 插件配合得很好。

不同之处在于 Spark（当前的渲染引擎）在发生变化时会替换整个 DOM，而 Blaze 旨在仅更改已更改的元素。