Question

我正在使用这个非常方便的JavaScript模板库：https://github.com/blueimp/JavaScript-Templates。我可以使用underscore.js和mustache.js创建元素并向其添加数据。

当我想要添加我自己的函数而不仅仅是字符串来填充模板的各个节点时，我的问题就来了。我想要做的是运行函数nicetime()来更新我新插入的<div>'s的时间，而不是只显示一次。

以下是代码和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);
}

注意：在nicetime()内，jsfiddle有一个功能time_since()。它用于格式化日期，如下所示：“1秒前......”。

Answer 1

在javascript函数中，对象就像任何其他变量一样。

您的问题是您正在调用该函数而不是将其分配给属性。

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

而是仅使用函数名称（不带括号）

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

EDIT 实际上我会采取不同的方法。而不是使用计时器，只需像以前一样调用该方法：

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

如何将自定义函数放在javascript对象中以便在html模板中使用？

1 个答案: