【发布时间】：2014-06-05 12:13:32
【问题描述】：
请参阅描述的示例项目。这个非常简单的代码只显示一个绿色或红色（success 或 danger 类）div 块和带有连接状态的文本，如 ON 或 off。
当您完全重新加载（Shift - F5）浏览器页面时，它可以按预期工作 10 次中的 9 次。
但有时文本会显示ON，但 div 仍然具有 html 源代码中预定义的类危险。
这是因为，Template...rendered 事件的触发晚于Meteor.status().connected。
我想省略在两个地方检查是否必须交换课程。
我已经尝试在Template...rendered 或Template...connection_status 函数中移动...removeClass().addClass()... 行。
无论如何，有时 div 会保持红色。
浏览器控制台会在以下情况下显示日志：
[日志] SET CLASS SUCCESS（connection.js，第 10 行）
[日志] 模板渲染（connection.js，第 24 行）
问：有没有人知道比复制类检查更好的解决方案？
备注：是的，我知道，您可以通过使用空格键来解决这个示例问题，并编写类似class="alert alert-{{connection_alert_type}}" 的内容
但我正在寻找与 jQuery UI 相结合的通用解决方案，以便也可以有类似 switchClass 的转换。
问：是否可以选择（以及如何做）在连接状态更改时使模板无效并重新呈现？
自己测试样本
创建流星示例应用并通过流星添加包
- mrt 创建示例
- CD 样本
- mrt 添加 bootstrap-3
- mrt 添加 jquery
- rm 样本。*
- mkdir 客户端
- cd 客户端
- 创建文件
client.html和client.js列出的内容 - 地铁
client.html
<head>
<title>connection</title>
</head>
<body>
{{> connection_tpl}}
</body>
<template name="connection_tpl">
<div id="connection-div" class="col-sm-12 alert alert-danger">
<div><label>Connection Status:</label>{{connection_status}}</div>
</div>
</template>
client.js（仅适用于 10 个或更少的 9 个）：
// save reference to div element
var Div_Connection = undefined;
Deps.autorun(function () {
// be reactive on Meteor connection
var connected = Meteor.status().connected;
// switch classes on connection
if (connected) {
console.log("SET CLASS SUCCESS");
if (!_.isUndefined(Div_Connection))
Div_Connection.removeClass('alert-danger').addClass('alert-success');
} else {
console.log("SET CLASS DANGER");
if (!_.isUndefined(Div_Connection))
Div_Connection.removeClass('alert-success').addClass('alert-danger');
}
// set session reactive flag
Session.set("connected", connected);
});
Template.connection_tpl.rendered = function () {
Div_Connection = $(this.find("#connection-div"));
console.log("TEMPLATE RENDERED");
}
Template.connection_tpl.connection_status = function () {
return Session.get("connected") ? "ON" : "off";
}
这是我目前的解决方案，但我不喜欢这种风格:-(
client.js（有效，但重复检查 - 性能不佳？可能两次转换？）
// save reference to div element
var Div_Connection = undefined;
var check_Classes = function(connected) {
if (connected) {
console.log("SET CLASS SUCCESS");
if (!_.isUndefined(Div_Connection))
if (!Div_Connection.hasClass('alert-success'))
Div_Connection.removeClass('alert-danger').addClass('alert-success');
} else {
console.log("SET CLASS DANGER");
if (!_.isUndefined(Div_Connection))
if (!Div_Connection.hasClass('alert-danger'))
Div_Connection.removeClass('alert-success').addClass('alert-danger');
}
}
Deps.autorun(function () {
// be reactive on Meteor connection
var connected = Meteor.status().connected;
// switch classes on connection
check_Classes(connected);
// set session reactive flag
Session.set("connected", connected);
});
Template.connection_tpl.rendered = function () {
Div_Connection = $(this.find("#connection-div"));
// switch classes on connection
check_Classes(Session.get("connected"));
console.log("TEMPLATE RENDERED");
}
Template.connection_tpl.connection_status = function () {
return Session.get("connected") ? "ON" : "off";
}
【问题讨论】：