是否可以在 jQuery 模板中调用 jQuery.data() 方法？答案

【问题标题】：Is it possible to invoke the jQuery.data() method within a jQuery template?是否可以在 jQuery 模板中调用 jQuery.data() 方法？
【发布时间】：2010-10-14 12:44:27
【问题描述】：

我正在使用 jQuery 模板插件（官方 jquery-tmpl 插件）来构建一个 HTML 列表。该模板基本上定义了<li> 元素，看起来像这样：

<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 元素之一？

【问题讨论】：

标签： jquery jquery-templates

【解决方案1】：

将您的模板更改为：

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

通过将 id 放在 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);
});

【讨论】：

这不是必需的。 jQuery 模板已经提供了一种使用 tmplItem 函数将数据关联回链接元素的方法。请参阅下面的答案。

【解决方案2】：

我会使用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 属性来获取一个值。

【讨论】：

【解决方案3】：

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

（实际上，您可以让模板生成内联的 Javascript 块来执行此操作，但这看起来非常难看。）

您可以为<a> 元素指定“id”值（如果“id”值为数字，则使用一些字母前缀）和“类”的价值。然后，从您的 jQuery 代码扩展模板后，您可以绑定事件处理程序。或者，您可以使用.delegate() 预先绑定事件处理程序（编辑，如@Nick 的回答。）

【讨论】：

【解决方案4】：

<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');

【讨论】：

【解决方案5】：

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);
});

【讨论】：

【解决方案6】：

JQuery 模板已经通过tmplItem 函数为您解决了这个问题。您可以使用 clicked 元素来关联它所绑定的数据：

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

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

查看我所做的完整工作示例here

....另一个例子是related question here。

【讨论】：