2

我正在使用 Meteor 0.6.2.1。

我刚刚在调用 Meteor 的 Session.set() 时遇到了 Bootstrap 模态的一个奇怪问题。

我想显示一个简单的模式对话框，并在用户单击模板实例时更新一些数据。

我将 Bootstrap 模态示例复制到我的 .html 文件中：

    <body>
        {{> hello}}
        {{> alert}}
    </body>

    <template name="hello">
        <h1>Hello World!</h1>
        {{greeting}}
        <input type="button" value="Click" />
        <br/>

        <!-- Button to trigger modal -->
        <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
    </template>

    <template name="alert">
        <!-- Modal -->
        <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Modal header</h3>
            </div>
            <div class="modal-body">
                <p>One fine body…&lt;/p>
                <p>data = {{data}}</p>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </template>

并在单击按钮时设置数据：

if (Meteor.isClient) {
  Session.set("data", "abcd");
  Template.hello.greeting = function() {
    return "Welcome to use-bootstrap.";
  };
  Template.alert.data = function() {
    return Session.get("data");
  };
  Template.hello.events({
    'click input': function() {
      if (typeof console !== "undefined" && console !== null) {
        return console.log("You pressed the button");
      }
    }
  });
  Template.hello.events({
    'click .btn': function() {
      var randomId;
      randomId = Random.id();
      console.log("data = " + Session.get("data"));

      // this cause duplicate Template.alert
      Session.set("data", randomId);
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function() {
    return console.log("Server Start!!");
  });
}

我使用 chrome 对其进行调试，并看到单击按钮时模态元素会重复。

我的代码怎么了？

4

1 回答 1

3

我不是 100% 确定为什么会发生这种情况，但我相信这与对 JS 代码（引导程序）中保存的模态节点的引用有关。

为了解决它，我添加了：

Template.alert.preserve(["#myModal"]);

来自 Meteor文档：

保留在用相同或修改的元素替换 DOM 元素与保留原始元素的效果不同的各种情况下很有用。这些包括：

  • 输入文本字段和其他表单控件
  • 带有 CSS 动画的元素
  • 框架
  • 引用保存在 JavaScript 代码中的节点
于 2013-05-04T18:22:32.557 回答