制作自动更新，Facebook风格的时间格式

making auto-updating, facebook-style time formatting

本文关键字：风格 时间 格式 Facebook 更新      更新时间：2023-09-26

有人可以帮助我弄清楚为什么我的javascript HTML模板不会自动更新时间，而常规HTML可以？这是我正在使用的模板库： https://github.com/blueimp/JavaScript-Templates

这是我的JS（你可以在这里摆弄它：http://jsfiddle.net/trpeters1/SpYXM/76/）： 

$(document.body).on('click', 'button', function(){
   var id= $(this).data('id');
   var data={id:id, string: "just now...", fxn: nicetime()};       
   var result = tmpl('<div id="string" data-id="'+id+'">{%=o.string%}</div><div id="function" data-id="'+id+'">{%=o.fxn%}</div>', data);     
   $('div[data-id="'+id+'"]').html(result);   
   nicetime();
});
function nicetime(){
  var time =  new Date(),
  var comment_date = setInterval(function() { 
  var time2 = time_since(time.getTime()/1000);
  $('#time_since').html(time2); 
  return time2; 
    }, 
  1000);
}

.HTML： 

<button data-id="1">1</button>
<div data-id="1"></div>  //tmpl output
<div id="time_since"></div>  //non-tmpl output

你想要这样的东西。

使用 JavaScript 模板化，您通常希望模板化一次，然后动态更新特定元素的值，而不是每秒重置整个元素的 innerHTML。

这是 JavaScript：

$(document.body).on('click', 'button', function(){
    var id= $(this).val(),
        time = +new Date,
        data = {
            id: id,
            string: "just now..."
        },    
        result = tmpl('<span class="string">{%=o.string%}</span>', data),
        tgt = $('#'+id),
        str;
    tgt.html(result);    
    str = tgt.find('.string');
    window.setInterval(function() {
        str.html(time_since(time/1000));
    }, 1000);
});
相关文章：