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

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) записи базы данных для редактируемого элемента. «Идентификатор» включен в 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">
        <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 2

Измените ваш шаблон на что-то вроде:

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

Answer 3

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

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

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

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

Answer 5

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

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

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

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

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

Answer 6

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