车把和倒计时模板
使用最后倒计时插件和Handlebars.js。
这两个插件分别运行得很好。以下<div>将给我一个倒计时(在这里倒计时至2017/01/01)：
<div id="getting-started"></div>
<script type="text/javascript">
$("#getting-started").countdown("2017/01/01", function(event) {
$(this).text(
event.strftime('%D days %H:%M:%S')
);
});
</script>这里有一个简单的把手例子：
<script type ="mustache/x.tmpl" id="helloTmpl">
{{#each this}}
{{endTime}}
{{/each}}
</script> 在这里，{{endTime}}是我希望倒计时的结束时间(而不是2017/01/01)。它在{{#each}}循环中，将运行许多{{endTime}}。
有谁知道让这一切成为可能的主意吗？每一个{{endTime}}都要倒计时？我试着把上面的倒计时插件放到一个助手里，但是没有成功，它变得有点混乱。提前谢谢。
编辑:结果
谢谢@76484。通过困惑你的例子，我现在让它与我的设置，太棒了！我每3-5秒运行一次function populate()，用新的数据刷新模板。这意味着，即使endTime数据没有变化，我也必须每3-5秒运行一次倒计时函数。我确实喜欢这样：
function populate()
{
var url = apiurl + 'api/myGreatData';
$.ajax
({
type: 'POST',
cache: false,
url: url,
dataType: 'json',
success: function (response)
{
var source = document.getElementById("helloTmpl").innerHTML;
var tmpl= Handlebars.compile(source);
var html = tmpl(response);
var box = document.getElementById("box");
box.innerHTML = html;
// Countdown Timer
$('[data-countdown]').each(function (index, el) {
var $el = $(el);
var finalDate = $el.attr('data-countdown');
$el.countdown(finalDate, function (event) {
$(this).text(event.strftime('%D days %H:%M:%S'));
});
});
}
})
}出于某些原因，我觉得如果倒计时器可以在这个function populate()之外使用ajax，那么它会更好，但是由于您的DOM解释，它将无法工作。也许倒计时带来的额外负担也太微不足道了.
回答 1
Stack Overflow用户
发布于 2016-08-25 00:44:30
你想做的事没什么难的。唯一的规则是，在调用插件之前，必须确保将endTime元素添加到DOM中。
您需要在模板中添加一个HTML元素，插件将绑定到模板中。而且，我不知道endTime是什么，因为您没有包含数据结构。我将假设一个更简单的数据结构--一个结束时字符串数组：
var endTimes = [
'2017/01/01',
'2018/02/02',
'2019/03/03'
];当我们调用插件时，我们需要一种方法来获取每个倒计时元素的最后日期。我将通过向模板中的元素添加一个数据属性data-countdown来实现这一点：
<script type="mustache/x.tmpl" id="helloTmpl">
{{#each this}}
<div data-countdown="{{.}}"></div>
{{/each}}
</script>一旦我们将所有倒计时元素添加到DOM中，就可以调用插件了。我们将使用data-countdown属性循环每个元素，从该属性获取finalDate值，然后调用该元素的插件：
var template = Handlebars.compile($('#helloTmpl').html());
$('#Container').html(template(endTimes));
$('[data-countdown]').each(function (index, el) {
var $el = $(el);
var finalDate = $el.attr('data-countdown');
$el.countdown(finalDate, function (event) {
$(this).text(event.strftime('%D days %H:%M:%S'));
});
});这是一个小提琴中的例子。
https://stackoverflow.com/questions/39133333
复制相似问题
腾讯云开发者
