Question

我正在使用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元素？

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

通过在div.item-display-container上添加ID，您可以轻松添加其他可轻松访问相同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);
});

Answer 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属性以获取值。

Answer 3

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

（实际上你可以让模板生成内联Javascript块来实现它，但这看起来非常难看。）

您可以为<a>元素提供“id”值（带有一些字母前缀，如果“id”值为数字），而不是使用老式的“onclick”来绑定事件处理程序。一个“阶级”的价值。然后，在从jQuery代码扩展模板后，您可以绑定事件处理程序。或者，您可以使用.delegate()预先绑定事件处理程序（编辑，如@ Nick的答案。）

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

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

Answer 6

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。

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

6 个答案: