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

Question

有些人可以帮我弄清楚为什么我的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 

Answer 1

你想要的东西像this。

使用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); 
});