1

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

4

6 回答 6

4

将您的模板更改为：

<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 放在 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);
});
于 2010-10-14T12:52:02.000 回答
4

我会使用数据属性，如下所示：

<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-14T12:52:19.023 回答
1

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

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

与其使用老式的“onclick”来绑定您的事件处理程序，不如为<a>元素提供“id”值（如果“id”值为数字，则使用一些字母前缀）以及“class”值。然后，从您的 jQuery 代码扩展模板后，您可以绑定事件处理程序。或者，您可以预先绑定事件处理程序.delegate()（像@Nick 的回答一样编辑。）

于 2010-10-14T12:50:01.697 回答
1 
<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-14T13:00:43.533 回答
0

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-22T14:21:01.777 回答
0

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

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

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

请参阅我在这里所做的完整工作示例

....还有一个相关的问题在这里作为另一个例子。

于 2011-05-14T22:17:35.383 回答