javascript - 使用 Javascript 部分在 HTML 模板中获取 Django 变量

Question

祝大家新年快乐!我想得到你的帮助，因为我正在考虑如何重写我的代码的一小部分。

我在我的上下文中设置了一个django变量，并且我在我的HTML模板中选择了这个变量(特别是在我的JavaScript部分)我的 HTML 模板)。

它可以工作，但这不是一个好主意，因为我想将所有 JS 设置在一个 JS 文件中，并且每个 HTML 模板中都没有 JavaScript 片段。

在 Django 中我有:

submethods = SubMethod.objects.all()
submethods_item = []
for item in submethods:
    submethods_item.append({'id': item.id, 'text': item.name})
context['submethods_item'] = submethods_item

在我的 HTML 模板中，我有这段 JavaScript :

function get_sub_method_options(keep_cur) {
  var sel_option = $('select#id_method-group').find("option:selected");
  var sel_val = sel_option.val();
  if (!sel_val) {
    $("select#id_method-sub_method").empty();
    let all_sub_methods = {{ submethods_item|safe }};
    for (var i = 0; i < all_sub_methods.length; i++) {
      $("select#id_method-sub_method").append('<option value="' + all_sub_methods[i].id + '">' + all_sub_methods[i].text + '</option>'); //here add list of all submethods
    }
    return;
  };
  ...
}

如您所见，我在这里获取了 Django 变量:

let all_sub_methods = {{ submethods_item|safe }};

我如何做同样的事情，但是使用一种方法可以在包含 Django 变量的 JavaScript 文件中编写 JS？

如果我在 HTML 模板中写入:

<script>
   let all_sub_methods = {{ submethods_item|safe }};
</script>

我在外部文件 .js 中编写了 JS 部分，它应该可以正常工作吗？

谢谢!

Answer 1

你的方法可能有效，但只是偶然。

你的上下文变量submethods_item是一个包含字典的Python列表。如果您在带有 safe 过滤器的模板中使用该变量，它会被呈现为有效 JavaScript 的字符串，但有很多情况可能会出错。

推荐的方法是将变量序列化为 JSON，在模板中应用 escapejs，然后在 JavaScript 中解析它。

# view
import json
...
context['submethods_item'] = json.dumps(submethods_item)

# template
<script>
   let all_sub_methods = JSON.parse("{{submethods_item|escapejs}}");
</script>