2

私はこの非常に便利な JavaScript テンプレート ライブラリを使用しています: https://github.com/blueimp/JavaScript-Templates。多くの人が underscore.js や mustache.js で行っているように、要素を作成してデータを追加することができます。

私の問題は、テンプレートのさまざまなノードにデータを入力するオブジェクトに文字列だけでなく、独自の関数を追加したいときに発生します。私がやりたいことは、時間を一度だけ表示するのではなくnicetime()、新しく挿入された時間を更新する関数を実行することです。<div>'s

これがコードと完全なデモです。

HTML:

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

JS:

$(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);
}

注:内部にはjsfiddlenicetime()で使用できる関数time_since()があります。「1秒前...」のように日付をフォーマットするためのものです。

4

1 に答える 1

1

JavaScript 関数では、他の変数と同様にオブジェクトです。

あなたの問題は、関数をプロパティに割り当てるのではなく、呼び出していることです。

var data={id:id, string: "just now...", fxn: nicetime()};

代わりに関数名のみを使用します (括弧なし)

var data={id:id, string: "just now...", fxn: nicetime};

編集実際には、とにかく別のアプローチを取ります。タイマーを使用する代わりに、以前のようにメソッドを呼び出すだけです。

var data={id:id, string: "just now...", fxn: nicetime(this)};       

$('div[data-id="'+id+'"]').html(result);   
nicetime(this);

時間を追跡する要素を取得するように nicetime を変更しました (各ノードにボタンがあると仮定しました (そうしないと、データは各ノードに保存されます)。

function nicetime(el){
    var time =  $(el).data('start') || new Date();
    var time2 = time_since(time.getTime()/1000);
    $('#time_since').html(time2); 
    var comment_date = time2; //still need to figure out where to put this value
    $(el).data('start', time)
    return comment_date;
}
于 2012-05-05T14:06:06.680 に答える