是否可以在jQuery模板中调用jQuery.data（）方法？

我正在使用jQuery模板插件（官方jquery-tmpl插件）构建一个HTML列表。模板基本上定义<li>元素，看起来是这样的：是否可以在jQuery模板中调用jQuery.data（）方法？

<script id="item-display-template"> type="text/html"> 
    <li> 
    <div class="item-display-container"> 
     <p>${SomeData1} .... ${SomeData2} etc....</p> 
     <a onclick="editRow();">Edit This Item</a> 
    </div> 
    </li> 
</script>

在结果列表中的每个项目都会有一个“编辑该项目”链接，将调用“editRow”功能。我需要能够使用正在编辑的项目的数据库记录的主键（id）提供此功能。 'id'包含在绑定到模板的JSON中。我首先想到的是用“编辑该项目”链接做到这一点：

<a onclick="editRow(${Id});">Edit This Item</a>

我认为，将工作，但我不知道这是“正确的方式”。

是否有可能调用模板中的'jQuery.data（）'方法将Id值附加到其中一个DOM元素，因为模板正在呈现？

来源

2010-10-14 Jesse Taber

改变你的模板是这样的：

<script id="item-display-template" type="text/html"> 
    <li> 
    <div class="item-display-container" data-itemid="${Id}"> 
     <p>${SomeData1} .... ${SomeData2} etc....</p> 
     <a class="editrow">Edit This Item</a> 
    </div> 
    </li> 
</script>

通过将识别码div.item-display-container你把它非常容易添加其他功能，可以轻松访问相同的ID，例如delete链接。

然后<ul>元素，你在插入这些<li>元素来做到这一点：

$('ul').delegate('.editrow','click',function(e) { 
    e.preventDefault(); 
    var id = parseInt($(this).parents('.item-display-container').attr('data-itemid'), 10); 
    editRow(id); 
});

来源

2010-10-14 12:52:02 PetersenDidIt

这不是必需的。 jQuery模板已经提供了一种使用tmplItem函数将数据关联到链接元素的方法。请参阅下面的答案。 – cweston 2011-05-14 22:22:50

不，你不能这样做，但你可以隐藏某些HTML属性—中的“id”，比如说“id”属性。

（好吧其实你可以有模板生成在线JavaScript区块去做，但似乎非常难看。）

而不是使用老式的“点击”绑定你的事件处理程序，你可以为<a>元素提供“id”值（如果“id”值是数字，则带有一些字母前缀）以及“class”值。然后，从jQuery代码扩展模板之后，您可以绑定事件处理程序。另外，您可以预先绑定的事件处理程序与.delegate()（编辑像@尼克的回答。）

来源

2010-10-14 12:50:01 Pointy

我会用一个data attribute，像这样：

<script id="item-display-template"> type="text/html"> 
    <li> 
    <div class="item-display-container"> 
     <p>${SomeData1} .... ${SomeData2} etc....</p> 
     <a class="edit" href="#" data-id="${Id}">Edit This Item</a> 
    </div> 
    </li> 
</script>

然后一个.live()或.delegate()处理程序，像这样：

$("a.edit").live("click", function() { 
    var id = $(this).attr("data-id"); 
    //use the id 
});

或者.delegate()：

$("#myUL").delegate("a.edit", "click", function() { 
    var id = $(this).attr("data-id"); 
    //use the id 
});

补充说明：在jQuery中1.4。3 +本周晚些时候出来，你可以使用.data()这样的：

var id = $(this).data("id"); 
//or: 
var id = $.data(this, "id");

它会回落到data-id属性得到一个值，如果没有一个在它的数据收集。

来源

2010-10-14 12:52:19

<script id="item-display-template"> type="text/html"> 
    <li> 
    <div class="item-display-container"> 
     <p>${SomeData1} .... ${SomeData2} etc....</p> 
     <a id="id_${Id}" class="link-for-edit">Edit This Item</a> 
    </div> 
    </li> 
</script> 

var eventEdit = function(ev) { 
    //... 
    var id = $(this).attr('id').split('_'); 
}; 

var items = $('#item-display-template').tmpl(data); 

$(items).find('a.link-for-edit').bind('click', eventEdit); 
$(items).appendTo('ul');

来源

2010-10-14 13:00:43

jQuery模板具有jQuery.tmplItem（）函数。使用这个，你可以访问你用来渲染模板的数据对象。所以没有必要在DOM级别复制数据。您可以使用它像这样：

<script id="item-display-template" type="text/html"> 
    <li> 
    <div class="item-display-container"> 
     <p>${SomeData1} .... ${SomeData2} etc....</p> 
     <a class="editrow">Edit This Item</a> 
    </div> 
    </li> 
</script>

然后在“编辑...”单击处理程序中访问模板的垫层数据获取的ID值：

$('ul').delegate('.editrow','click',function(e) { 
    e.preventDefault(); 
    var id = $(this).tmplItem().data.Id; 
    editRow(id); 
});

来源

2011-03-22 14:21:01 user207825

JQuery的模板已经解决这个问题了你用tmplItem函数。您可以使用点击元素，它绑定到数据关联：

$("#item-display-template").tmpl(clientData).appendTo("ul"); 

$("li a").click(function() { 
    var tmplItem = $(this).tmplItem(); 
    alert(tmplItem.data.id); 
});

查看完整的工作的例子，我做了here

....和另一例的related question here。

来源

2011-05-14 22:17:35 cweston

是否可以在jQuery模板中调用jQuery.data（）方法？

回答

相关问题