Ненавязчивые атрибуты jQuery Set перед добавлением - возможен ли более эффективный синтаксис?

Question

Основной процесс для этого кода:

• $.get шаблон усы
• $.getJSON некоторые данные из API
• Тогда код ниже для обработки на клиенте

$.each(data, function (i, item) {
    item.Date = internationalDateTime(item.Date );
    var html = Mustache.to_html(template, item);
    var $html = $(html);
    $html.find('input[name=btnView]').attr('onclick', 'loadView(' + item.Id + ')');
    $('#list-container').append($html);
});

Есть ли лучший способ (читай более краткий, я думаю) сделать это без необходимости $html переменная?

Не хочу зацикливаться на "одних линиях" в моем коде, но мне это кажется немного неправильным.

Answer 1

Перед добавлением вашего HTML в DOM, вы можете сделать это:

$(document).on("click", "#list-container input[name=btnView][itemId]", function(){
    loadView($(this).attr("itemId"));
});

затем просто добавьте свой HTML на страницу, вот так, единственное, что здесь нужно, это сохранить item.Id:

$.each(data, function (i, item) {
    item.Date = internationalDateTime(item.Date );
    $(Mustache.to_html(template, item)).appendTo('#list-container')
        .find("input[name=btnView]").attr("itemId", item.Id);

});

Ваша проблема в том, чтобы получить доступ к item.Id,

Answer 2

Вы можете урезать его, но для удобства чтения я обычно делаю то, что вы написали...

$.each(data, function (i, item) {
    item.Date = internationalDateTime(item.Date );
    var html = Mustache.to_html(template, item);
    $(html)
        .appendTo('#list-container')
        .find('input[name=btnView]')
        .on('click', function() {
            loadView(item.Id);
        });
});

Вы также можете избавиться от html переменная, если вы действительно хотели, но я думаю, что вы можете зайти слишком далеко с минимизацией кода.

appendTo() вернет html как объект jQuery, чтобы вы могли найти указанные элементы ввода, а затем присоединить обработчик события щелчка, и все это одним ударом.

Answer 3

Что насчет с:

$.each(data, function (i, item) {
    item.Date = internationalDateTime(item.Date);
    var html = Mustache.to_html(template, item);
    html.querySelector('input[name=btnView]').addEventListener('click', function() {
        loadView(item.Id);
    }, false);
    $('#list-container').append(html);
});