Передайте переменную из HTML-шаблона Flask в файл JavaScript для использования - PullRequest
Новая
       19

Передайте переменную из HTML-шаблона Flask в файл JavaScript для использования

1 голос
/ 12 апреля 2019

Я пытаюсь передать переменную из 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)

Я хочу использовать переменную index в файле JS. Я видел в разных местах, как использовать эту переменную в шаблоне 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 для использования. Консоль показывает ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'classList' из неопределенного

на showDivs (слайд-шоу.js: 24)

на слайд-шоу.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>

Ответы [ 3 ]

2 голосов
/ 12 апреля 2019

Попробуй это.Поместите переменную в файл slideshow.html внутри {% block content%} .. {% endblock%}, поскольку ее необходимо сначала объявить, создать и передать в базовый шаблон.Все, что находится за пределами блока, вероятно, будет игнорироваться базовым шаблоном. 

{% block content %} 

<script> 
  var slideIndex= {{ index }} 
</script> 

...rest of your content 

{% endblock %}
1 голос
/ 12 апреля 2019

Это может быть проблемой, так как при выполнении встроенных сценариев вы определяете переменную slideIndex вне области импортируемого кода JavaScript (таким образом, функция showDivs(n) не распознает эту переменную) 

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

Один из способов найти решение проблемы - это посмотреть на Как передать данные из Flask в JavaScript в шаблоне?

Ответ: mcote

В основном он говорит, что вы можете встроить атрибут данных в ваш HTML внутри тега, например, div, который впоследствии можно будет извлечь из JavaScript, например, так: 

<div id="hisDiv" data-slindex="{{slideIndex|tojson}}">
var slideIndex = JSON.parse(document.getElementById("hisDiv").dataset.slindex);
0 голосов
/ 12 апреля 2019

Поместите свой 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...