Question

我正在使用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…</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来调试它，并在单击按钮时看到模态元素将重复。

关于我的代码的问题是什么？

Answer 1

我不是百分之百确定为什么会这样，但我相信它与JS代码中保存的模态节点的引用（bootstrap）有关。

要解决这个问题，我补充道：

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

来自流星docs：

在替换DOM的各种情况下，保存很有用   具有相同或修改元素的元素将不具有相同的元素   保留原始元素的效果。其中包括：


输入文本字段和其他表单控件

带CSS动画的元素

I帧

使用JavaScript代码保存引用的节点

Meteor的Session.set导致重复Bootstrap模式？

1 个答案: