Question

我的 Template.PageName.helper Meteor.callPromise()中有两个 Bootstrap Modal ，我想按特定顺序启动。订单为：modal.hide('loadingPageAnimation')后跟modal.show('c2bNotifications')。

默认情况下，modal.hide('loadingPageAnimation')

在页面 Router.route（'/ page'）中激活modal.show('loadingPageAnimation')

这成功显示modal.show(loadingPageAnimation) while {{strong> in my helper ）我的Meteor.CallPromise()正在等待结果：

../客户/主

Meteor.callPromise('c2b').then(
  function(results) {

    //### When results comes through, Modal.hide('loadingPageAnimation') 
    Modal.hide('loadingPageAnimation');

    //### then Modal.show('c2bNotifications' along with results message)
    Modal.show('c2bNotifications', {msg: results};

  }).catch( function(error) {
    alert("Error!");
  }
);

问题在于，当Meteor.callPromise('c2b')返回结果时，Modal.hide('newLoadingModal');成功隐藏，但Modal.show('c2bNotifications', {msg: results});仅显示有时，有时会< strong>不显示。我希望Modal.show('c2bNotifications', {msg: results});始终显示/工作的一致性。任何人都可以解释为什么会发生这种情况，并且可能会提供一个更好的编码解决方案，Modal.show('c2bNotifications', {msg: results});被迫显示？

在我的模板文件下面找到。

../客户/ main.html中

<template name="c2bNotifications">
  <div class="modal fade makeAnOffer">
    <div class="modal-dialog modal-sm">
      <div class="modal-content modal_MakeAnOffer">

        <div class="modal-header">
          <h4 class="modal-title">Notification </h4>
        </div>

        <div class="modal-body">
          <div id = approvedMsg > {{msg}} </div> 
        </div>

        <div class="modal-footer c2bNotifications">
          <button type="button" class="btn btn-primary btn-lg" id="paymentNotificationClose" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>
</template>

期待您的帮助

Answer 1

第一个解决方案：您可以做的是添加一点超时，让第一个模态隐藏时间。然后调用Modal.show（）。

{
    Modal.hide('loadingPageAnimation');

    setTimeout(function(){
        Modal.show('c2bNotifications');
    }, 1000);
}

问题是您需要等待第一个模态隐藏，因为没有参数可以使用peppelg:bootstrap-3-modal包向Modal.hide（）函数添加回调。如果上面的代码确实不起作用，您可以添加此代码

Modal.allowMultiple = true;

第二个解决方案：我看到你正在使用第一个模式来显示加载标志，也许你可以将这个标志添加到c2bNotifications中，然后用这样的帮助器显示它：

<template name="c2bNotifications">

<div class="modal fade makeAnOffer">
    <div class="modal-dialog modal-sm">
        <div class="modal-content modal_MakeAnOffer">

            <div class="modal-header">
                <h4 class="modal-title">Notification </h4>
            </div>
            {{#if isLoaded}}
            <div class="modal-body">
                <div id = approvedMsg > {{msg}} </div> 
            </div>

            <div class="modal-footer c2bNotifications">
                <button type="button" class="btn btn-primary btn-lg" id="paymentNotificationClose" data-dismiss="modal">Close</button>
            </div>
            {{else}}
               <!-- insert loading page animation -->
            {{/if}}
        </div>
    </div>
</div>
</template>

你的助手代码应该是这样的：

Template.c2bNotifications.helpers({
    isLoaded(){
        // return true if your Meteor.callPromise succeed, otherwise false
    },
});

第三种解决方案： 你可以尝试创建一个自制的回调，可能是通过检查DOM中是否存在模态。

为什么我的下一个modal.show（）并不总是有效？

1 个答案: