javascript - 为什么我的下一个 modal.show() 并不总是有效？

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)，而(在我的助手中)我的Meteor.CallPromise()正在等待结果:

../client/main

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}); 仅显示有时，有时不显示。我希望 Modal.show('c2bNotifications', {msg: results}); 始终显示/工作保持一定的一致性。任何人都可以解释为什么会发生这种情况，并可能提供更好的编码解决方案，从而强制显示 Modal.show('c2bNotifications', {msg: results}); ？

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

../client/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 中是否存在模式来实现。