javascript - 静态js文件中的django模板标签

Question

我想在静态 js 文件中使用模板标签和变量。

我会给你3个文件。no1_index.html no2_inc/index.html no3_index javascript 文件

no1 文件是模板。html标签在这里。它引用 no2.file 来包含一些脚本。

no2.file 包含一些脚本。它引用 no3.file 来制作我自己的脚本。

在 no3.file 中，我想处理来自 view.py 的模板变量，但在 no3.file 中，它无法读取模板标签和变量。我可以为这个问题做些什么？

no1_index.html

{% load static %}
{% load mathfilters %}
{% extends 'mobileWeb/base/base.html' %}

{% block content %}
    {% include 'mobileWeb/inc/index/index.html' %}

    <div id="map" style="width:80%;height:300px; margin:20px auto; border-radius: 10px;"></div>

    <div style="width:90%; margin:auto">
        <!-- this row will wrapping foreach-->

        {% for mart in marts %}
            <div class="row">
                <div class="col-xs-5" onclick="martClick({{ mart }})">
                    {% with "/mobileWeb/images/"|add:mart.imageFileNo|add:".png" as path %}
                        <img src="{% static path %}" style="width:120px; height:120px; margin-top:10px;">
                        <br>
                        <h3>{{ mart.name }}</h3>
                    {% endwith %}
                </div>

                <div class="col-xs-7" style="height:200px; overflow:scroll" data-toggle="modal" data-target="#martModal"
                     data-whatever="{{ mart.id }}_{{ mart.name }}">
                    {% for item in items %}
                        {% if mart.id == item.mart %}
                            <div>
                                <h4 style="color:mediumpurple;">{{ item.name }}</h4>
                                {% if item.discountPrice == 1 or item.discountPrice == 100 %}
                                    <h6><span
                                            style="color:red">{{ item.originalPrice|sub:item.discountPrice|div:item.originalPrice|mul:100|floatformat:"0" }}% 할인</span>
                                    </h6>
                                {% else %}
                                    <h6>할인판매가 : {{ item.discountPrice }}원 <span
                                            style="color:red">{{ item.originalPrice|sub:item.discountPrice|div:item.originalPrice|mul:100|floatformat:"0" }}% 할인</span>
                                    </h6>
                                {% endif %}

                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
        <!-- Mart Modal -->
        <div class="modal fade" id="martModal" role="dialog">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title" id="modal-title"></h4>
                    </div>
                    <div class="modal-body" id="modal-body">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Item Modal -->
        <div class="modal fade" id="itemModal" role="dialog">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="itemModal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="itemModal-title" id="itemModal-title" onclick="purchaseItem()"></h4>
                    </div>
                    <div class="itemModal-body" id="itemModal-body">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" onClick="stopTimer()">취소
                        </button>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

no2 inc/index.html

{% load static %}

<!-- outter module-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-159115722-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }

    gtag('js', new Date());

    gtag('config', 'UA-159115722-1');
</script>

<!-- kakao map -->
    <script type="text/javascript"
            src="//dapi.kakao.com/v2/maps/sdk.js?appkey=2a40b9e58744cbe7d0cb367e51c07eb4"></script>


<!-- css -->
<link rel="stylesheet" href="{% static 'mobileWeb/css/index/index.css' %}">

<!--js-->
{% block javascript %}
    <script src="{% static 'mobileWeb/js/index/index.js' %}"></script>
{% endblock %}

no3 索引 javascript 文件

        function writeMartModal(martId, martName) {
            console.log("martID : " + martId);
            document.getElementById('modal-body').innerHTML = '';


            document.getElementById('modal-title').innerHTML = martName;
            {% for item in items %}
                var itemMartId = {{ item.mart }};
                if (martId == itemMartId) {
                    var itemId = {{ item.id }};
                    var itemName = '{{ item.name }}';
                    var itemPrice = {{ item.discountPrice }};
                    var itemExpirationDate = '{{ item.expirationDate|date:"m월d일 H시 i분 까지" }}';
                {% autoescape off %}
                    var itemComment = '{{ item.comment }}';
                {% endautoescape %}
                    var html = "";
                    var div = document.createElement('div');
                    html += `
                    <div>
                    <div data-toggle="modal" data-target="#itemModal" data-whatever="${martName}_${itemId}_${itemName}">
                        <h4 style = "color:mediumpurple;" > ${itemName} </h4>
                    <h6> ${itemPrice}원 </h6>
                    <h6> ${itemExpirationDate} </h6>
                    </div>
                    {% autoescape off %}
                    <h6 style="color:red">${itemComment}</h6>
                    {% endautoescape %}
                    </div>
                `
                    div.innerHTML = html;
                    document.getElementById('modal-body').appendChild(div);
                }

            {% endfor %}
        };

javascript文件中的错误

标签： javascriptdjangodjango-templatesdjango-staticfiles