javascript - 具有项目特定功能的循环 Django 模板的最佳实践？

Question

我有一个可行的解决方案，但我想知道最好的方法。

我有一个生成项目表的模板，如下所示:

{% for item in item_list %}
    {{ item.name }}: <button onclick="doSomething({{item.id }})">Click Me!</button>
{% endfor %}

<script>
function doSomething(item_id) {
    // Do stuff here
    // Is actually an ajax request which sends the item's id
}
</script>

这非常有效，但我知道最好的做法是在 Javascript 中使用监听器，而不是 onlick。

拥有一个功能并根据单击哪个按钮动态地将 item.id 注入(inject)其中的最佳方法是什么？

我能想到的唯一方法是在 Javascript 中再次遍历 item_list 并为每个 item 的按钮创建一个函数。这是最好的方法吗？

{% for item in item_list %}
    {{ item.name }}: <button id="btn-{{ item.id }}">Click Me!</button>
    {% endfor %}

<script>
{% for item in item_list %}
    jQuery("#btn-{{ item.id }}").click(function() {
      // Do the stuff with {{ item.id }}
    });
{% endfor %}
</script>

在我看来，根据 item_list 的长度，这可能会生成大量 Javascript。这是一个问题吗？有没有更好的办法？

Answer 1

我会这样做:

{% for item in item_list %}
    {{ item.name }}: <button class="button-item" id="btn-{{item.id}}">Click Me!</button>
{% endfor %}

在 jquery 中，

jQuery(document).on('click', ".button-item", function(){
    var $this = $(this);
    var id = $this.attr('id').split('-')[1];
    //do stuff with this id or $this element
});

在这里，您的监听器正在监听应用于所有生成的项目节点的单个类 button-item。单击时，获取被单击节点的 ID。