- 首页
- 其他开发
- Meteor:Modal 正在消失并锁定用户
Meteor:Modal 正在消失并锁定用户
[英] Meteor: Modal is disappearing and locking out the user
本文介绍了Meteor:Modal 正在消失并锁定用户的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试让模态始终与 Meteor 一起工作.当数据上下文值改变时，它们会消失.我已经解决了这个问题的一部分，如 this question所述，但现在它又回来了，当周围模板中的值发生变化时，它就会发生，而不是模板中的值发生变化.
这是实际的模态:
<div class="modalfade" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="paymentModalLabel" aria-隐藏=真"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="paymentModalLabel">付款</h4>
<div class="modal-body">{{>PaymentModalBody}}
<div class="modal-footer">{{>支付模式反馈}}
当变化的值在内部时(或者换句话说，当paymentModalBody或paymentModalFeedback有变化的值时，模态工作正常，因为这些模板重新渲染不会导致主要模态元素重新渲染)，但是....
这发生在我的 userView 模板中，该模板显示有关用户的信息(废话).模态处理与用户的支付交互，并调用一个名为...
的Meteor.methodmakeBraintreePayment: function(saleObj) {var now = new Date();Gateway.transaction.sale(saleObj, Meteor.bindEnvironment(功能(错误，结果){如果(结果.成功){如果(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 }});返回 result.transaction.id;} 别的 {throw new Meteor.Error(401, result.message);}},功能(错误){console.log('绑定失败:' + 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 来解决这个问题，但我已经对此有不同的问题.如果你能提供一些关于这两者的见解，那就太棒了！
解决方案
将你的模态也放在 {{#isolate}} 块中.
{{#isolate}}<div class="modalfade" id="paymentModal" tabindex="-1" role="dialog" aria-...{{/隔离}}
这样，如果外部发生了变化，它会像内部一样被忽略.
更好的办法可能是考虑升级到使用 Blaze RC(运行 meteor --release blaze-rc1 update)，它使用细粒度的 DOM 补丁来避免这个问题.并且可以很好地与 Bootstrap 和其他 jquery 插件配合使用.
不同之处在于 Spark(当前的渲染引擎)在发生更改时替换整个 DOM，而 Blaze 旨在仅更改已更改的元素.
I am trying to get modals to consistently work with Meteor. They have this problem of disappearing when data context values change. I've already solved a portion of this problem, as documented by this question, but now it's back, and it's happening when values in the surrounding template change, rather than values in the template.
Here's the actual modal:
<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">×</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>
The modal works fine when the values changing are inside of it (or in other words, when paymentModalBody or paymentModalFeedback have changing values, since those template re-renders don't cause the main modal elements to be re-rendered), but....
this is happening inside my userView template, which displays information about a user (duh). The modal handles payment interaction with the user, and calls a Meteor.method called...
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);
}
));
}
now again, all of this works just fine, but, after the payment is made and the modal has displayed the success message, after a second or two the modal disappears and leaves only the background, locking out the user and making it necessary to refresh the page. Broken.
It's pretty clear to me that this is happening because of those Meteor.users.update calls, since they're changing the data context of the userView template, which is causing the modal template to be re-rendered. So, I tried to use preserve:
Template.userView.preserve(['#paymentModal', '.modal-dialog', '.modal-content', '.modal-header', '.modal-body', 'modal-footer', '.modal-title', '.close']);
and this:
Template.userView.preserve(['#paymentModal']);
Neither worked. This should be maintaining the html for all of the static modal elements, while allowing everything around it to be re-rendered, but it doesn't.
What's going on? How to I solve this?
Thanks in advance!
P.S.
I have been trying to solve this problem by using a more stable modal library, bootboxjs, but I've had a different problem with that. If you can offer some insight on either that would be awesome!
解决方案
Put your modal in an {{#isolate}} block as well.
{{#isolate}}
<div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-
...
</div>
{{/isolate}}
This way, if something changes outside it will be ignored as well as inside it.
Something better may be to consider upgrading to using the Blaze RC (running meteor --release blaze-rc1 update) which uses fine grained DOM patching to avoid this issue. And plays well with Bootstrap and other jquery plugins.
The difference is Spark (the current rendering engine) replaces the entire DOM when there is a change, where Blaze is designed to change only the element which has changed.
这篇关于Meteor:Modal 正在消失并锁定用户的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
