Question

此代码的基本过程是：

$.get一个Mustache模板
$.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变量的情况下，是否有更好的方法（我认为更简洁）？

不想过度思考＆＃34;一个衬里＆＃34;在我的代码中但它对我来说看起来有点不对。

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对象返回，这样您就可以找到指定的输入元素，然后附加一个click事件处理程序，一次性命中。

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

在追加之前不显眼的jQuery设置属性 - 更高效的语法可能吗？

3 个答案: