jQuery 模板 - 将数据关联到模板 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 的 data 函数能够将每个行项关联回一个标识符以进行更新。

通常你可以这样做：

$.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/

Answer 2

这可能是一个解决方法：

$("#clientTemplate").tmpl(clientData).filter("li").each(function(i){
   $(this).data(clientData[i].id);
}).appendTo( "ul" ); 

希望这会有所帮助。
干杯