Question

在multiple ways中已经提出了这个问题，但是在脚本标记之前定义变量等解决方案却没有奏效。

template.html

<script>
    var locations = {{ some_variable }}
</script>
<script type="text/javascript" src="{% static 'base/scripts/maps.js' %}"></script>

我相信这是因为maps.js实际上是一个功能。它的开头如下：

maps.js

(function($){
    "use strict";

    function mainMap() {
      var ib = new InfoBox();

       // Infobox Output
       function locationData(locationURL,locationImg,locationTitle, locationAddress, locationRating, locationRatingCounter) {
           return('SOME_HTML_WITH_VARIABLES')
      }

       // Locations
       var locations = [
         [ locationData('listings-single-page.html','images/listing-item-01.jpg',"Tom's Restaurant",'964 School Street, New York', '3.5', '12'), 40.94401669296697, -74.16938781738281, 1, '<i class="im im-icon-Chef-Hat"></i>'],

       ];

我想要做的是从我的模型中传递位置数据，例如

  {% for model in query_list %}
[ locationData('link_to','img_url','{{ model.name }}','{{ model.address }}', '5', '10'), {{ model.latitude }}, {{ model.longitude }}, {{ forloop.counter }}, '{{ model.icon }}'],
  {% endfor %}

可能的解决方案：

将整个maps.js文件发布到script.html内的脚本标记内。但是这个文件有10000多行。

Answer 1

这不是一个精确的解决方案，但这是处理这种情况的一个技巧。

views.py

def index(request):
    monthList = ['jan', 'feb', 'mar]
    activities = [1,2,3]
    model = {"name" : "Fine Guy" ]

    context = {
      'monthList' : monthList,
      'activities' : activities,
      'model' : model,
    }

    return render(request, 'index.html', context)

index.html

<!-- passing django values to external js -->
<!-- hided -->
<input type="text" id="monthList" style="display: none" value="{{ monthList|safe }}">
<input type="text" id="activities" style="display: none" value="{{ activities|safe }}">

<!-- for your question -->
<input type="text" id="modelname" style="display: none" value="{{ model.name|safe }}">

在这里，我只是将值列表monthList和activities从django上下文传递到呈现的HTML文件，然后使用(style="display:none")

将其隐藏

|safe用于从Python格式到Javacript格式的准确值

现在，您可以使用 标记ID 中的 static / external.js 中的值em> index.html

external.js

var monthList = document.getElementById("monthList").value;
var activities = document.getElementById("activities").value;

// for your question
var modelname = document.getElementById("modelname").value;

将数据从Django视图/模板传递到静态javascript

1 个答案: