Question

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

使用.append而不是.html添加了另一个我不想要的容器。

JS：

var updateClock = function(){
  var data = {
    'date': getDate(),
    'day': getDay(),
    'hour': getHour(),
    'minute': getMinute()
  };

  var template = $('#template').html();
  $('.container').html(Mustache.render(template, data));
};

updateClock();
setInterval(updateClock, 30000);

HTML：

<div class="container">
    <script type="text/html" id="template">
      <div class="date-container row">
        <div class="large-4 medium-4 small-8 columns">
          <h3>{{date}}</h3>
          <h5>{{day}}</h5>
          <h5>
            <span>{{hour}}</span>
            <span>:</span>
            <span>{{minute}}</span>
          </h5>
      </div>
    </script>
</div>

Answer 1

您正在使用第一个updateClock（）中的html替换模板。将<script>模板标记放在容器之外，或者缓存模板，因为每次updateClock（）都不需要获取模板。在开始时获取一次，并重复使用它，那么如果你用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));

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

使用带有Mustache模板的setInterval更新时间

1 个答案: