製作自動更新，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); 
});