Question

I’m using this pretty handy JavaScript template library: https://github.com/blueimp/JavaScript-Templates.
I can create elements and add data to them as many are doing with underscore.js and mustache.js.

My problem comes when I want to add my own functions and not just strings to the object that will populate the template’s various nodes. What i’d like to do is run the function nicetime() to update the time of my newly inserted <div>'s instead of just showing the time once.

Here’s the code, and a full demo.

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

note: inside nicetime() there is a function time_since() which is available on the jsfiddle. It is for formatting the date like this: “1 second ago…”.

Answer 1

In javascript functions are objects just like any other variable.

Your problem is that you are invoking the function instead of assigning it to a property.

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

instead use only the function name (without the parenthesis)

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

EDIT
Actually I would take a different approach anyway. Instead of using a timer, just invoke the method as you previously were:

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

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

I modified nicetime to take the element that tracks the time (i assumed there was a button for each node (otherwise the data would be stored on each node)

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;
}