Question

我试图将Flask中的变量传递到HTML模板，然后在单独的JavaScript文件中使用该变量。

routes.py

fav_photo_index = Photo_Index()


@app.route("/slideshow", methods=["POST", "GET"])
def slideshow():
    cur_image_index = fav_photo_index
    print(cur_image_index.index, image_urls[cur_image_index.index])
    if request.method == "POST":
        update_index(request, cur_image_index)
    favorite = is_favorite(image_urls[cur_image_index.index])
    return render_template('slideshow.html',
                           title="Slideshow",
                           images=image_urls,
                           favorite=favorite,
                           index=cur_image_index.index)

我想在JS文件中使用index变量。我已经在不同地方看到了如何在HTML模板中使用该变量，但是没有看到如何将其传递到.js文件中以供使用...

slideshow.js

var slideIndex = "{{index}}";
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("slide");
  if (n > x.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = x.length} ;
  for (i = 0; i < x.length; i++) {
    // x[i].style.display = "none";
    x[i].classList.remove('slide-visible'); 
  }
  // x[slideIndex-1].style.display = "block"; 
  x[slideIndex-1].classList.add('slide-visible');
}

如您所愿，我希望index变量在.js文件中使用...我该怎么做？

到目前为止，我刚刚尝试将变量添加到slideshow.html的开头，但是它不起作用：

当前slideshow.html：

{% extends "layout.html" %}
{% block topscripts %}
    <link rel="stylesheet" type="text/css" href= "{{ url_for('static',filename='styles/slideshow.css') }}">
{% endblock %}
{% block content %}
{% include "/HTML Snippets/favorite_button.html" %}
<div class="slideshow-container">
    {% for image in images %}
        {% if image != "favicon.ico" %}
        <img class="slide" src="{{ url_for('static', filename='images/' + image) }}">
        {% endif %}
    {% endfor %}    

<form action="" method="post">
<input type="hidden" name="prev-next-buttons">
<button class="w3-button w3-display-left" name='prev-photo' onclick="plusDivs(-1)">&#10094;</button>
<button class="w3-button w3-display-right" name='next-photo' onclick="plusDivs(+1)">&#10095;</button>
</div>
</form>

{% endblock %}

{% block endscripts %}
    <script type="text/javascript" src="{{ url_for('static', filename='scripts/slideshow.js') }}"></script>
{% endblock %}

但是它不会将该变量传递给.js文件供使用。控制台显示错误：

未捕获的TypeError：无法读取未定义的属性'classList'

在showDivs（slideshow.js：24）

在slideshow.js：2

仅供参考，layout.html：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href= "{{ url_for('static',filename='styles/layout.css') }}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        {% block topscripts %}
        {% endblock %}
    </head>
  <body>
    <div class="topnav">
      <a class="active" href="{{url_for('main')}}">Index</a>
      <a class="active" href="{{url_for('favorites')}}">Favorites</a>
      <a class="active" href="{{url_for('slideshow')}}">Slideshow</a>
    </div>
    <div class="container">
        {% block content %}
        {% endblock %}
    </div>

  </body>
  <script type="text/javascript" src="{{ url_for('static', filename='scripts/jscript.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='scripts/jQueryRotate.js') }}"></script>
    {% block endscripts %}
    {% endblock %}
</html>

Answer 1

尝试一下。将变量放在slideshow.html中{％block content％} .. {％endblock％}内，因为需要先声明和创建变量，然后将其传递给基本模板。基本模板可能会忽略该块之外的任何内容。

{% block content %} 

<script> 
  var slideIndex= {{ index }} 
</script> 

...rest of your content 

{% endblock %}

Answer 2

这可能是一个问题，因为通过执行内联脚本，您在导入的JavaScript代码的范围之外定义了变量slideIndex（因此使函数showDivs(n)无法识别该变量）

 <script type="text/javascript" src="{{ url_for('static', filename='scripts/slideshow.js') }}"></script

我找到解决问题的一种方法是查看： How can I pass data from Flask to JavaScript in a template?

答案：mcote

基本上，他说的是您可以将HTML数据属性嵌入到标签（例如div）中，该标签可以稍后从JavaScript内部检索，例如：

<div id="hisDiv" data-slindex="{{slideIndex|tojson}}">
var slideIndex = JSON.parse(document.getElementById("hisDiv").dataset.slindex);

Answer 3

将您的JS放入HTML文件中，它将可以正常工作。

<html>
<head>
</head>
<body>
{% extends "layout.html" %}
{% block content %}
{% include "/HTML Snippets/favorite_button.html" %}
<div class="slideshow-container">
    {% for image in images %}
        {% if image != "favicon.ico" %}
        <img class="slide" src="{{ url_for('static', filename='images/' + image) }}">
        {% endif %}
    {% endfor %}    

<form action="" method="post">
<input type="hidden" name="prev-next-buttons">
<button class="w3-button w3-display-left" name='prev-photo' onclick="plusDivs(-1)">&#10094;</button>
<button class="w3-button w3-display-right" name='next-photo' onclick="plusDivs(+1)">&#10095;</button>
</div>
</form>

{% endblock %}
</body>
{% block scripts %}
{% endblock %}
<script type="text/javascript">
var slideIndex = "{{index}}";
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("slide");
  if (n > x.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = x.length} ;
  for (i = 0; i < x.length; i++) {
    // x[i].style.display = "none";
    x[i].classList.remove('slide-visible'); 
  }
  // x[slideIndex-1].style.display = "block"; 
  x[slideIndex-1].classList.add('slide-visible');
}

</script>
</html>

将变量从Flask HTML模板传递到JavaScript文件以供使用

3 个答案: