Django模板变量如何传递给外部js调用的方法小结

当我们在使用Django框架进行Web开发时，经常需要将Django模板中的数据传递给JavaScript脚本，以便在页面中展示交互式的功能。而这时涉及到如何将Django模板变量传递给外部JavaScript的问题。下面是具体步骤：

1. 在HTML模板中定义JavaScript变量

首先，在HTML模板中定义JavaScript变量，将需要在JavaScript中调用的Django模板变量赋值给该变量。这个过程可以直接在HTML模板中进行，例如：

<script>
    var product_name = "{{ product.name }}";
</script>

在上述示例中，我们使用双方括号语法将Django模板变量product.name插入到了JavaScript代码中，并将其赋值给了JavaScript变量product_name。

2. 在外部JavaScript中使用该变量

然后，在外部的JavaScript脚本中，直接调用所需的JavaScript变量即可，例如：

console.log(product_name);

在上述示例中，我们使用console.log函数将变量product_name输出到控制台中。

注意事项

• 在定义JavaScript变量时，要注意针对于一些特殊字符进行转义，例如双引号。
• 在页面加载时，确保JavaScript代码在HTML模板中定义的JavaScript变量之后执行，可以通过将JavaScript代码放置在标签底部实现。

下面给出两个具体的示例，详见以下代码：

html模板代码：

{% block scripts %}
    <script>
        var product_id = "{{ product.id }}";
        var product_price = "{{ product.price }}";
    </script>
    <script src="{% static 'js/product.js' %}"></script>
{% endblock %}

外部JavaScript文件product.js代码：

console.log("Product id: " + product_id);
console.log("Product price: " + product_price);

上述代码中，我们在HTML模板中定义了两个JavaScript变量：product_id和product_price，并将它们赋值为Django模板变量product.id和product.price的值。然后，在外部的JavaScript文件product.js中，直接调用了这两个变量并输出到控制台中。

另一个示例代码如下：

html模板代码：

{% block scripts %}
    <script>
        var tasks = [
            {% for task in task_list %}
                {
                    "id": "{{ task.id }}",
                    "title": "{{ task.title }}",
                    "is_completed": {{ task.is_completed|yesno:"true,false" }}
                },
            {% endfor %}
        ];
    </script>
    <script src="{% static 'js/todo.js' %}"></script>
{% endblock %}

外部JavaScript文件todo.js代码：

tasks.forEach((task) => {
    console.log("Task id: " + task.id);
    console.log("Task title: " + task.title);
    console.log("Is task completed? " + task.is_completed);
});

上述代码中，我们定义了一个JavaScript数组tasks，并使用for循环将Django模板中的task_list数据渲染到该数组中。然后，在外部JavaScript文件todo.js中，直接调用该数组会打印出任务列表中的所有任务的id、标题和是否完成等信息。

这就是将Django模板变量传递给外部JavaScript调用的简单总结。