django 模板创建中的脚本错误答案

【问题标题】：scripting error in django template creationdjango 模板创建中的脚本错误
【发布时间】：2021-07-13 13:34:34
【问题描述】：

我正在开发一个在模板中执行多个功能的代码，并且我使用脚本来检查使用 if else 和 for 循环的功能，但是我遇到了这些错误，请帮助我知道原因，提前谢谢

如果您在脚本标记内的代码末尾看到 if else 标记的声明必须有点像下面的代码，但是一旦我保存代码，它就会被格式化并给我错误

 {% if messages %}
        {% for message in messages %}
            alert('{{message}}')
        {% endfor %}
    {% endif %}

上传.html文件

{% extends 'base.html' %} {% block content %}

<div class="form-group">
    <label for="name" class="col-md-3 col-sm-3 col-xs-12 control-label">Select : </label>
    <div class="col-md-8">

        <select name="cars" id="cars">
 <option value="">Select</option>
  <option value="WithTime">AmpandFreq</option>
  <option value="WithoutTime">Amplitude</option>
  
</select>
    </div>
</div>


<div id="withtime" style="display:none">
    <form action="/csvapp/upload/" method="POST" enctype="multipart/form-data" class="form-horizontal">
        {% csrf_token %}
        <div class="form-group">
            <label for="name" class="col-md-3 col-sm-3 col-xs-12 control-label">File: </label>
            <div class="col-md-8">
                <input type="file" name="csv_file" id="csv_file" required="True" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-3 col-sm-3 col-xs-12 col-md-offset-3" style="margin-bottom:10px;">
                <button class="btn btn-primary"> <span class="glyphicon glyphicon-upload" style="margin-right:5px;"></span>Upload </button>
            </div>
        </div>
    </form>
</div>

<div id="withouttime" style="display:none">
    <form name="form" action="/csvapp/upload_withouttime/" method="POST" enctype="multipart/form-data" class="form-horizontal">
        {% csrf_token %}
        <div class="form-group">
            <label for="name" class="col-md-3 col-sm-3 col-xs-12 control-label">File: </label>
            <div class="col-md-8">
                <input type="file" name="csv_file" id="csv_file" required="True" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="name" class="col-md-3 col-sm-3 col-xs-12 control-label">Sampling Frequency: </label>
            <div class="col-md-8">
                <input type="text" name="sampfreq" id="sampfreq" required="True" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-3 col-sm-3 col-xs-12 col-md-offset-3" style="margin-bottom:10px;">
                <button class="btn btn-primary"> <span class="glyphicon glyphicon-upload" style="margin-right:5px;"></span>Upload </button>
            </div>
        </div>
    </form>
</div>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
    { %
        if messages %
    } { %
        for message in messages %
    }
    alert('{{message}}') { % endfor %
    } { % endif %
    }
    $('select').on('change', function() {

        var a = $(this).val()


        { %
            if a == "WithoutTime" %
        } {
            alert("inside")
            $('#withtime').hide();
            $('#withouttime').show();
        } { %
            else %
        } {
            $('#withtime').hide();
            $('#withouttime').show();
        }
    })
</script>
{% endblock %}

【问题讨论】：

为什么{ %之间有空格？
去掉 { 和 % 之间的空格。如果之后您仍然有问题，我们也可以检查您正在使用的 IDE。目前您的 IDE 由于空间原因将代码识别为 Javascript。这应该通过删除空间来解决，但如果没有，那么知道 IDE 将有助于接下来的步骤
@SteveMapes 我正在使用 Visual Studio Code，我已经删除了 { 和 % 之间的空格，但是一旦我保存我的代码，它就会自动给出空格并引发错误。
好的。我并没有真正使用过 VSC，但我假设你已经将它指向你的 python 解释器？ code.visualstudio.com/docs/python/tutorial-django 我不确定这是否仍然需要，但还有一个用于 Django 模板支持的插件。我很惊讶它会需要它，因为它支持 Python，但这可能值得一看 marketplace.visualstudio.com/…。这也有用吗？ automationpanda.com/2018/02/08/…

标签： javascript html jquery css django

【解决方案1】：

在搜索并改变了许多内部设置后，我对错误和要求得出了一个简单的结论

在命令面板 (ctrl-shift-p) 中选择安装扩展并选择 Django 模板。

要开始使用扩展...

转到调试视图并选择启动扩展，然后点击运行 (F5)。这将启动第二个 Code 实例，并从第一个窗口加载扩展。
当您进行更改时，您还可以重新加载（在 Mac 上为 Ctrl+R 或 Cmd+R）第二个代码窗口以加载任何更改。

欲了解更多信息，请参阅下面的链接 Django 模板视图[https://marketplace.visualstudio.com/items?itemName=bibhasdn.django-html]

【讨论】：