Javascript 静态js文件中的django模板标记_Javascript_Django_Django Templates_Django Staticfiles

Javascript 静态js文件中的django模板标记

javascript django

Javascript 静态js文件中的django模板标记,javascript,django,django-templates,django-staticfiles,Javascript,Django,Django Templates,Django Staticfiles,我想在静态js文件中使用模板标记和变量我给你3份文件。 no1_uuindex.html no2_uu;inc/index.html no3_uu索引javascript文件 function writeMartModal(martId, martName) { console.log("martID : " + martId); document.getElementById('modal-body').innerHTML =

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

我给你3份文件。 no1_uuindex.html no2_uu;inc/index.html no3_uu索引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 %}
        };

第一个文件是模板。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 %}

{% 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 %}

{%load static%}
{%load mathfilters%}
{%extends'mobileWeb/base/base.html%}
{%block content%}
{%include'mobileWeb/inc/index/index.html%}
{集市%中集市的%s}
{%with“/mobileWeb/images/”|添加：mart.imageFileNo |添加：“.png”作为路径%}


{{mart.name}
{%endwith%}
{items%%中的项的%s}
{%if-mart.id==item.mart%}
{{item.name}
{如果item.discountPrice==1或item.discountPrice==100%}
{item.originalPrice | sub:item.discountPrice | div:item.originalPrice | mul:100 | floatformat:“0”}할인
{%else%}
할인판매가 : {{item.discountPrice}}원 {item.originalPrice | sub:item.discountPrice | div:item.originalPrice | mul:100 | floatformat:“0”}할인
{%endif%}
{%endif%}
{%endfor%}
{%endfor%}
&时代；
接近
&时代；
취소
{%endblock%}

no2 inc/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 %}

{% 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 %}

{%load static%}
window.dataLayer=window.dataLayer | |[]；
函数gtag（）{
推送（参数）；
}
gtag（'js'，新日期（））；
gtag（“配置”、“UA-159115722-1”）；
{%block javascript%}
{%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 %}
        };


函数writemartmodel（martId，martName）{
console.log（“martID:+martID”）；
document.getElementById（'modal-body'）。innerHTML=''；
document.getElementById（'modal-title'）。innerHTML=martName；
{items%%中的项的%s}
var itemMartId={{item.mart}}；
if（martId==itemMartId）{
var itemId={{item.id}；
var itemName='{{item.name}}'；
var itemPrice={{item.discountPrice}}；
var item expirationDate='{{item.expirationDate | date:'m월D일 H시 我분 까지" }}';
{%autoescape off%}
var itemComment='{item.comment}}}'；
{%endautoescape%}
var html=“”；
var div=document.createElement（'div'）；
html+=`
${itemName}
${itemPrice}원 
${itemExpirationDate}
{%autoescape off%}
${itemComment}
{%endautoescape%}
`
div.innerHTML=html；
document.getElementById（'modal-body'）.appendChild（div）；
}
{%endfor%}
};

javascript文件中的错误

Django模板引擎不处理JS文件。那么如何将JS文件与Django模板分离？只有一种方法可以将Django模板中的JS脚本组合在一起？因为我是初学者，所以不知道通用的方法是什么。