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's 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

这可能是一种解决方法：

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

希望这会有所帮助。干杯

Answer 2

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

所以，你可以做类似的事情：

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

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

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

此处示例：http://jsfiddle.net/rniemeyer/fvhj4/

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

2 个答案: