javascript - 将 Django 模板中的 JSON 传递到独立的 Javascript 文件

Question

我的views.py中有以下代码:

from django.shortcuts import render
from django.shortcuts import render_to_response
from django.http import HttpResponse
import json, requests

platformReq = requests.get(platformUrl, headers={'Authorization': 'Token token="1234"'})

platformData = json.loads(platformReq.text)
return render_to_response('find.html',{'platformList':platformData})

在我的模板文件中，我有这个:

<script src="{% static "js/standalone.js" %}" type="text/javascript"></script>
  <script>
    {# this is where it fetches the json and formats it correctly #}
    var js_variable = {{platformList | jsonify}};
    console.log(js_variable);
    function_in_standalone_js(js_variable);
</script>

JSON 从 console.log() 正确输出，但我收到错误:

ReferenceError: function_in_standalone_js is not defined

在我的独立 Javascript 中:

var function_in_standalone_js = function(js_variable)
{
var options = js_variable['platforms'];
console.log(options)
}

以下是输出内容，以及 console.log() 给出的内容(有超过 3 个，但我不想粘贴整个内容):

{"platforms": [{"slug": "saturn", "id": 32, "name": "Sega Saturn"}, {"slug": "mac", "id": 14, "name": "Mac"}, {"slug": "vc", "id": 47, "name": "Virtual Console (Nintendo)"}]}

提前致谢!

Answer 1

由于模板中 JS 的加载时间不同，您应该将内联 JS 包装在 $(document).ready(function(){...}) 中，以确保它只运行加载文档的其余部分后，包括外部 JS 文件。

<script>
    $(document).ready(function(){
      var js_variable = {{platformList | jsonify}};
      console.log(js_variable);
      function_in_standalone_js(js_variable);
    });
</script>