jQuery Templating - 将数据关联到模板DOM元素

Question

我正在使用jQuery的模板插件呈现几个与此类似的行项:

var clientData = [
    { name: "Rey Bango", id: 1 },     
    { name: "Mark Goldberg", id: 2 },     
    { name: "Jen Statford", id: 3 } ]; 

<script id="clientTemplate" type="text/html">     
    <li><${name}</li> 
</script> 

$("#clientTemplate").tmpl(clientData).appendTo( "ul" ); 

我想知道是否可以使用jQuery的数据函数来将每个行项目关联回标识符以进行更新.

通常你可以做这样的事情:

$.each(clientData, function(idx, item) {
    $('<li></li>').appendTo('ul#clientTemplate')
        .text(item.name)
        .data('clientId', item.id);
});

$('ul#clientTemplate li').click(function() {
    updateClient($(this).data('clientId'));
});

但是,在模板化时,您没有此类控件.

注意:我宁愿不使用新的隐藏元素在每一行上存储这些数据,或者如果我不需要,则使用元素上的其他属性.

想法？

谢谢

Answer 1

jQuery 模板插件包含tmplItem函数，该函数允许您返回与模板呈现的任何元素关联的实际数据。

因此，您可以执行以下操作：

var client = $("li").first().tmplItem().data 

在这种情况下，client您的数据将是：

{ name: "Rey Bango", id: 1 }

示例在这里： http: //jsfiddle.net/rniemeyer/fvhj4/