使用Javascript部分在HTML模板中獲取Django變量

Question

祝大家新年快樂 ！ 我想得到您的幫助，因為我正在考慮如何從代碼中重寫一小部分。

我的上下文中有一個django variable集，我在HTML template （尤其是在HTML template JavaScript部分中）拾取了此變量。

它可以工作，但這不是一個好主意，因為我想將所有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>