Как зациклить переменные из контроллера Python в JavaScript с колбой? - PullRequest
Новая
       39

Как зациклить переменные из контроллера Python в JavaScript с колбой?

0 голосов
/ 02 июня 2018

Я хочу показать вложенный контент на веб-сайте:

например:

фраза1: яблоко

твит, включая фразу1: мне нравится яблоко.

фраза2: banana

твит, включая фразу2: лучше всего банан.

мой набор данных, который в контроллере python является [["apple", "включая фразу1: мне нравится яблоко."], ["банан", "лучше всего банан."]]

Мой HTML-файл: 

{% extends "layout.html" %}
{% block body %}
<p>Click the button to loop from 1 to 6, to make HTML headings.</p>
<button onclick="myFunction2()">Try it</button>
<div id="demo"></div>
<script>
function myFunction2() {
    var x ="", i;    
    for (i=1; i<=2; i++) {
        x = x +"<h2 class=\"phrase\">phrase"+i+":"+"{{phrases[i]}}"+"</h2>";
    }
    document.getElementById("demo").innerHTML = x;
}
</script>
{% endblock %}

, но он показывает только:

Нажмите кнопку, чтобы перейти от 1 к 6,сделать заголовки HTML.

фраза1:

фраза2:

не показывал ни одной фразы.но когда я использую {{phrases [1]}} {{phrases [2]}}, он может показываться нормально.я не могу использовать я цикл каждой переменной?

1 Ответ

0 голосов
/ 02 июня 2018

Вы можете использовать ajax со своим flask бэкэндом.Сначала создайте HTML-шаблон для отображения кнопки и создайте второй, меньший шаблон для циклического перебора набора данных:

home.html: 

<html>
  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
 <body>
   <p>Click the button below to access tweet list from 1-6</p>
   <button class='tweets'>View Tweets</button>
   <div id='results'></div>
 </body> 
<script>
  $(document).ready(function() {
    $('.tweets').click(function() {
     $.ajax({
     url: "/get_tweets",
      type: "get",
      data: {'tweets': 'yes'},
      success: function(response) {
       $("#results").html(response.result);
       },
       error: function(xhr) {
       //pass
      }
     });
   });
 });
</script>
</html>

display_data.html: 

{%for tweet in tweets%}
  <div class='tweet' style='border:solid;border-color:black'>
    <p>{{tweet.title}}: {{tweet.phrase}}</p>
    <p>{{tweet.including}}</p>
  </div>
{%endfor%}

Затем в файле .py создайте необходимые маршруты flask: 

import flask
import typing
app = flask.Flask(__name__)
class Tweet(typing.NamedTuple):
  phrase:str
  including:str
  title:str

@app.route('/tweets', methods=['GET'])
def tweets():
  return flask.render_template('home.html')

@app.route('/get_tweets')
def view_tweets():
   datasets = [["apple","including phrase1: I like apple."],["banana","banana is best."]]
   new_set = [Tweet(a, b, f'phrase{i}') for i, [a, b] in enumerate(datasets, start=1)]
   return flask.jsonify({"result":flask.render_template('display_data.html', tweets = new_set)})
...