Рендеринг (много) шаблонов в Flask - PullRequest
Новая
       1

Рендеринг (много) шаблонов в Flask

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

Я бы хотел, чтобы у меня была домашняя страница, на которой я выбирал между опцией A и опцией B. Когда я нажимаю на одну из опций, я хотел бы перейти на page1.html (опция A) или на page2.html (опция B).

У меня есть эти файлы: 

static/
  route.js
templates/
  index.html
  page1.html
  page2.html
web_server.py

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/opta')
def optionA():
    return render_template('page1.html')

@app.route('/optb')
def optionB():
    return render_template('page2.html')

index.html 

<body>
    <button id="optionA">Option A</button>
    <button id="optionB">Option B</button>
    <script src="{{url_for('static', filename='route.js')}}"></script>
</body>

route.js: 

$("#optionA").click(function(e) {
    $.ajax({
        type: "GET",
        url: "/opta",
        contentType: 'application/json;charset=UTF-8',
        success: function(result){
            console.log("Hooray");
            window.location.replace("{{ url_for('optA') }}"); // doesn\'t work
            var divA = $("#a"); divA.html(result); // (a is a div in page1.html) doesn\'t work too
        },
        error: function(textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });
});

// same for option B

Ответы [ 3 ]

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

Чтобы дать более точный ответ, нам, вероятно, потребуется более подробное описание страниц, которые вы хотите отобразить. Если страницы совершенно не связаны, вы можете просто избавиться от JavaScript и использовать следующий HTML-код: 

<body>
    <a href="/opta"> <button id="optionA">Option A</button> </a>
    <a href="/optb"> <button id="optionB">Option B</button> </a>
</body>

Если под рендерингом нескольких шаблонов в фляге вы подразумеваете использование некоторого макета index.html на страницах 'A' и 'B', тогда я прочитал бы раздел дочерний шаблон в jinja2. документы

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

Во-первых, исходя из того, что вы обрисовали в общих чертах, вам в основном нужен только один маршрут с различными параметрами, поэтому в Flask вы можете использовать Flask переменные правила для обработки его одним маршрутом: 

@app.route('/', defaults={'page':None})
@app.route('/<page>')
def index(page):
    if page == None: 
        return render_template('index.html')
    else:
        return render_template(page)

В html-шаблоне, как упоминалось в нескольких комментариях, все, что вам нужно, это тег <a>, вам не нужны кнопка и javascript: 

<body>
    <a href="page1.html" id="optionA">Option A</a>
    <a href="page2.html" id="optionB">Option B</a>
</body>
0 голосов
/ 27 июня 2018

Ну, конечно: 

<script src="{{url_for('static', filename='route.js')}}"></script>

Берут ваш файл javascript из "статических" ресурсов - это означает, что он подается как есть, а не интерпретируется как шаблон. Механизм шаблонов Jinja2, используемый в flask, может использоваться в файлах Javascript, но вы должны предоставлять его через представление, так же, как это делается с вашими URL-адресами "index" и "opt *" (а затем файл .js должен быть заключен в правильные шаблоны dir, а не в "static".

Вместо того, чтобы превращать Javascript в шаблон, который часто более опасен, чем нет, и усложняет поддержку кода javascript, вы можете просто вставить в свой основной шаблон index простой фрагмент javascript, просто установив переменную url для документ. Извлеченный javascript будет затем использовать встроенную переменную в основном HTML-документе.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...