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

我正在使用 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 的数据 http://api.jquery.com/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'));
});

但是，在模板化时您没有这种类型的控制。

Note：我不想使用新的隐藏元素在每行上存储此数据，或者如果不需要的话，也不想在元素上存储附加属性。

jQuery 模板插件包括tmplItem http://api.jquery.com/jquery.tmplitem/函数允许您返回与模板呈现的任何元素关联的实际数据。

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

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

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

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

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