Meteor.js 中的简单时钟或如何重新加载模板?
Simple Clock in Meteor.js or how to reload Templates?
我正在尝试使用 meteor.js 中的模板,但如何在给定时间后重新加载它们?例如,我想要一个名为“time”的模板,它必须每秒重新加载以显示当前时间,还有一个模板“date”必须每分钟重新加载一次,因为每一分钟日期都可以更改,或者一个日历有每 5 分钟左右重新加载一次 .ics,以确保始终准确。
我当前的代码如下所示:
<body>
<!-- TOP -->
<div class="top left">{{> time }}</div>
<div class="top mid"></div>
<div class="top right">{{> date }}</div>
</body>
<template name="time">
<div>{{ clock }}</div>
</template>
<template name="date">
<div>{{ date }}</div>
</template>
js:
if (Meteor.isClient) {
Template.time.helpers({
clock: function () {
var currentTime = new Date();
var currentHours = currentTime.getHours();
var currentMinutes = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();
currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
return currentHours + ":" + currentMinutes + ":" + currentSeconds;
}
});
Tempate.date.helpers({
date: function () {
var month = ["Januar", "Februar", "März", "April", "Mai", "Juni", "July", "August", "September", "October", "November", "Dezember"];
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
return d + " " + month[m] + " " + y;
}
});
}
重新加载模板的最简单方法是提供和更改响应式数据源。在您的情况下,这可能是时钟值。
var clock = new ReactiveVar(new Date());
Template.time.onCreated(function() {
Meteor.setInterval(function() {
clock.set(new Date());
}, 1000);
});
Template.time.helpers({
clock: function() {
var currentTime = clock.get();
...
},
});
我正在尝试使用 meteor.js 中的模板,但如何在给定时间后重新加载它们?例如,我想要一个名为“time”的模板,它必须每秒重新加载以显示当前时间,还有一个模板“date”必须每分钟重新加载一次,因为每一分钟日期都可以更改,或者一个日历有每 5 分钟左右重新加载一次 .ics,以确保始终准确。
我当前的代码如下所示:
<body>
<!-- TOP -->
<div class="top left">{{> time }}</div>
<div class="top mid"></div>
<div class="top right">{{> date }}</div>
</body>
<template name="time">
<div>{{ clock }}</div>
</template>
<template name="date">
<div>{{ date }}</div>
</template>
js:
if (Meteor.isClient) {
Template.time.helpers({
clock: function () {
var currentTime = new Date();
var currentHours = currentTime.getHours();
var currentMinutes = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();
currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
return currentHours + ":" + currentMinutes + ":" + currentSeconds;
}
});
Tempate.date.helpers({
date: function () {
var month = ["Januar", "Februar", "März", "April", "Mai", "Juni", "July", "August", "September", "October", "November", "Dezember"];
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
return d + " " + month[m] + " " + y;
}
});
}
重新加载模板的最简单方法是提供和更改响应式数据源。在您的情况下,这可能是时钟值。
var clock = new ReactiveVar(new Date());
Template.time.onCreated(function() {
Meteor.setInterval(function() {
clock.set(new Date());
}, 1000);
});
Template.time.helpers({
clock: function() {
var currentTime = clock.get();
...
},
});