【问题标题】:Simple Clock in Meteor.js or how to reload Templates?Meteor.js 中的简单时钟或如何重新加载模板?
【发布时间】:2016-08-06 05:28:37
【问题描述】:

我正在尝试使用流星.js 中的模板,但是如何在给定时间后重新加载它们?例如,我想要一个名为“时间”的模板,它必须每秒重新加载以显示当前时间,还有一个模板“日期”,它必须每分钟重新加载,因为日期每分钟都可以改变,或者一个日历有每 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;
        }
    });

}

【问题讨论】:

标签: javascript templates meteor refresh clock


【解决方案1】:

重新加载模板的最简单方法是提供和更改响应式数据源。在您的情况下,这可能是时钟值。

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();
    ... 
  },
});

【讨论】:

  • 谢谢,我不知道如何间隔和这个onCreate!
猜你喜欢
  • 2015-01-15
  • 1970-01-01
  • 2012-10-09
  • 2014-01-18
  • 2013-10-05
  • 1970-01-01
  • 1970-01-01
  • 2016-06-10
  • 2015-01-10
相关资源
最近更新 更多