1

私のjavascriptHTMLテンプレートが時刻を自動更新しないのに、通常の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
4

1 に答える 1

3

あなたはこのようなものが欲しい。

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);
});
于 2012-05-06T18:46:34.637 に答える