引导模式不会出现在 Meteor 中 [英] Bootstrap modal doesn't appear in Meteor

问题描述

我正在尝试让 Bootsrap 的模式工作，但是当我单击按钮时，我得到的只是一个黑屏，没有出现我期望的模式对话框.我正在使用流星.

I'm trying to get Bootsrap's modal to work but when I click on the button all I get is a black screen, no modal dialog box appears as I expect it to. I'm using meteor.

这是我的代码:

<div class="container">
    <h2>Example of creating Modals with Twitter Bootstrap</h2>
    <div class="modal hide fade in" id="example" style="display: none; ">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>This is a Modal Heading</h3>
        </div>
        <div class="modal-body">
            <h4>Text in a modal</h4>
            <p>You can add some text here.</p>
        </div>
        <div class="modal-footer">
            <a class="btn btn-success" href="#">Call to action</a>
            <a class="btn" data-dismiss="modal" href="#">Close</a>
        </div>
    </div>
    <p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch
        demo modal</a></p>
</div>

我基本上是从以下位置获得代码的:http://www.w3resource.com/twitter-bootstrap/modals-tutorial.php 用于测试目的.

I've essentially obtained the code from: http://www.w3resource.com/twitter-bootstrap/modals-tutorial.php for testing purposes.

推荐答案

我遇到了类似的问题.问题在于 Meteor 和 Bootstrap 工作方式的根本区别.Meteor 假定标记可以随时重新加载.如果任何实时变量发生变化，Meteor 只会重新加载模板.另一方面，Bootstrap 假设模板只会被加载一次，并且在运行时使用 javascript 对其进行修改.

I had a similar issue. The problem is a fundamental difference in how Meteor and Bootstrap work. Meteor assumes that markup can be reloaded at any time. If any live variables change, Meteor just reloads the template. Bootstrap on the other hand assumes that the template will only be loaded once, and them modified with javascript at runtime.

正在发生的事情是流星正在加载我的模态模板.在某些时候，我正在单击某些东西，这会导致该模式出现在 javascript 中.然而，片刻之后，一个实时变量发生了变化，导致模板再次加载.由于模板隐藏了模式，它覆盖了只是试图显示模板的 javascript.

What is happening is meteor is loading my modal template. At some point I'm clicking on something, which causes that modal to appear in javascript. However, a split second later, a live variable changes which causes the template to load again. Since the template has the modal hidden, it overrides the javascript that was just trying to show the template.

我通过将模态框的内部放在与外部不同的模板中解决了这个问题.外部模板不响应任何实时变量，因此希望它永远不会被重新加载.

I solved this by putting the inside of the modal in a different template than the outside. The outer template doesn't respond to any live variables, so it will hopefully never be reloaded.

之前:

<template name="modal">      
  <div class="modal hide fade in" id="settings-modal" data-backdrop="false">
    <div class="modal-header">
    ...
</template>

之后:

<template name="modal">      
  <div class="modal hide fade in" id="settings-modal" data-backdrop="false">
    {{> modalInner}}
  </div>
</template>      

<template name="modalInner">
  <div class="modal-header">
    ...
</template>

这篇关于引导模式不会出现在 Meteor 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！