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

jQuery Templating - Associating data to template DOM elements

本文关键字：DOM 元素 数据 template 关联 jQuery      更新时间：2023-09-26

我正在使用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'));
});

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

注意:如果没有必要，我宁愿不使用新的隐藏元素来存储每一行的数据，或者在元素上添加额外的属性。

想法?

谢谢

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

所以，你可以这样做:

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

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

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

示例如下:http://jsfiddle.net/rniemeyer/fvhj4/

这是一个变通方法:

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

希望这对你有帮助。欢呼声

相关文章：