是否可以在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（）方法？

回答

相關問題