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的最佳方法是什么？

我能想到的唯一方法是在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。

Answer 2

您可以使用data-* attributes将任意数据添加到HTML 5代码中。例如：

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

并在单独的JavaScript文件中（此特定示例基于jQuery，但没有必要）：

$('.item').click(function() {
    var item_id = $(this).data('item-id');
    alert(item_id);
});

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

2 个答案: