Можно ли вызвать метод jQuery.data() в шаблоне jQuery?

Я использую плагин шаблона 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) записи базы данных для редактируемого элемента. Идентификатор включен в JSON, привязанный к шаблону. Моей первой мыслью было сделать это с помощью ссылки «Редактировать этот элемент»:

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

Я думаю, что это сработает, но я не уверен, что это "правильный путь".

Можно ли вызвать метод jQuery.data() в шаблоне, чтобы прикрепить значение Id к одному из элементов DOM во время рендеринга шаблона?


jquery jquery-templates
person Jesse Taber    schedule 14.10.2010    source источник

Ответы (5)


arrow_upward
4
arrow_downward

Измените свой шаблон, чтобы он выглядел примерно так:

<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, вы упрощаете добавление других функций, которые могут легко получить доступ к тому же идентификатору, например, ссылку 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);
});
person PetersenDidIt    schedule 14.10.2010
comment
Это не нужно. Шаблоны jQuery уже предоставляют способ связывания данных с элементом ссылки с помощью функции tmplItem. Смотрите мой ответ ниже. - person cweston; 15.05.2011

arrow_upward
4
arrow_downward

Я бы использовал атрибут данных, например:

<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, чтобы получить значение, если его нет в коллекции данных.

person Nick Craver    schedule 14.10.2010

arrow_upward
1
arrow_downward

Нет, вы не можете этого сделать, но вы можете спрятать «id» в каком-нибудь HTML-атрибуте, например, в атрибуте «id».

(Ну, на самом деле вы могли бы заставить шаблон генерировать встроенные блоки Javascript для этого, но это кажется ужасно уродливым.)

Вместо того, чтобы использовать старомодный «onclick» для привязки ваших обработчиков событий, вы можете дать элементам <a> значение «id» (с некоторым альфа-префиксом, если значение «id» является числовым), а также значение «класс». Затем, после расширения шаблона из вашего кода jQuery, вы можете привязать обработчики событий. В качестве альтернативы вы можете предварительно связать обработчики событий с помощью .delegate() (редактировать, как в ответе @Nick.)

person Pointy    schedule 14.10.2010

arrow_upward
0
arrow_downward

Шаблоны 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>

Затем в обработчике щелчка «Редактировать...» вы получаете доступ к базовым данным шаблона, чтобы получить значение идентификатора:

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

arrow_upward
0
arrow_downward

Шаблоны JQuery уже решают эту проблему с помощью функции tmplItem. Вы можете использовать элемент clicked, чтобы связать данные, к которым он привязан:

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

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

См. полный рабочий пример, который я сделал здесь

.... и связанный вопрос здесь для другого примера .

person cweston    schedule 14.05.2011