Javascript 使用带有胡须模板的setInterval更新时间

我对MustacheJS非常陌生，我想使用setInterval更新当前时间，但是当setInterval触发时，它会导致Mustache模板为空

使用.append代替.html添加了另一个我不想要的容器

JS:

HTML:

{{date}}
{{day}
{{小时}
:
{{分钟}

您将在第一个UpdateLock（）中用html替换模板。将您的

模板标记放在容器外部，或者缓存模板，因为您不需要每次updateLock（）都获取模板。一开始就获取它一次，然后重用它，那么在HTML中替换它就无关紧要了

var template = $('#template').html();
var updateClock = function(){
  var data = {
    'date': getDate(),
    'day': getDay(),
    'hour': getHour(),
    'minute': getMinute()
  };    
  $('.container').html(Mustache.render(template, data));
};

updateClock();
setInterval(updateClock, 30000);

我个人存储并缓存所有带名称空间的模板，以避免污染全局名称空间，例如：

var MoustacheTemplates = 
{
    ClockTemplate :  $('#template').html(),
    AnotherTemplate: $('#anothertemplate').html(),
    AndAnotherOne :  $('#andanothertemplate').html()
};

然后你就可以用“强类型”了

乙二醇

当然，在使用它们之前，必须先缓存它们

var template = $('#template').html();
var updateClock = function(){
  var data = {
    'date': getDate(),
    'day': getDay(),
    'hour': getHour(),
    'minute': getMinute()
  };    
  $('.container').html(Mustache.render(template, data));
};

updateClock();
setInterval(updateClock, 30000);

var MoustacheTemplates = 
{
    ClockTemplate :  $('#template').html(),
    AnotherTemplate: $('#anothertemplate').html(),
    AndAnotherOne :  $('#andanothertemplate').html()
};

 $('.container').html(Mustache.render(MoustacheTemplates.ClockTemplate, data));