我正在使用 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对其进行调试，发现单击按钮时模态元素将重复。
我的代码出了什么问题？
最佳答案
我不是 100% 确定为什么会发生这种情况，但我相信这与 JS 代码( Bootstrap )中保存的模态节点的引用有关。
为了解决这个问题，我添加了:
Template.alert.preserve(["#myModal"]);
来自 meteor docs :
Preservation is useful in a variety of cases where replacing a DOM element with an identical or modified element would not have the same effect as retaining the original element. These include:
- Input text fields and other form controls
- Elements with CSS animations
- Iframes
- Nodes with references kept in JavaScript code
关于session - Meteor 的 Session.set 导致重复 Bootstrap 模式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16373442/