Flask url для URL-адресов в Javascript

Каков рекомендуемый способ создания динамических URL-адресов в файлах Javascript при использовании flask? В шаблонах jinja2 и в представлениях python используется url_for, как это рекомендуется делать в файлах .js? Так как они не интерпретируются шаблонным движком.

То, что в основном хотят сделать, это: 

// in comments.js
$.post(url_for('comment.comment_reply'));

Что невозможно.

Но, естественно, я могу выполнить это в шаблоне: 

<script>
    $.post(url_for('comment.comment_reply'));
</script>
8 31
javascript python flask

8 ответов:

То, что предлагает @dumbmatter, в значительной степени считается де-факто стандартным способом. Но я думал, что есть более приятный способ сделать это. Поэтому мне удалось разработать этот плагин: Flask-JSGlue .

После добавления {{ JSGlue.include() }} в исходном коде можно сделать следующее: 

<script>
    $.post(Flask.url_for('comment.comment_reply', {article_id: 3}));
</script>

Или: 

<script>
    location.href = Flask.url_for('index', {});
</script>
27

ДокументацияFlask предлагает использовать url_for в вашем HTML-файле для установки переменной, содержащей корневой URL-адрес, к которому вы можете получить доступ в другом месте. Затем вам придется вручную построить URL-адреса представления поверх этого, хотя я думаю, что вы можете хранить их аналогично корневому URL-адресу.

14

Ответ@jeremy's правильный и, вероятно, более распространенный подход, но в качестве альтернативного ответа обратите внимание, что dantezhu написал и опубликовал расширение flask, которое утверждает, что делает точный перевод url-route-map-to-javascript, предложенный в комментарии.

3

Я использую этот грязный и уродливый трюк: 

"{{url_for('mypage', name=metadata.name,scale=93,group=2)}}"
.replace('93/group',scale+'/group')

Где scale - переменная javascript, которую я хочу использовать для запроса AJAX. Итак, url_for генерирует URL и JavaScript заменяет параметр во время выполнения. Сгенерированный код выглядит примерно так: 

"/ajaxservive/mynam/scale/93/group/2".replace('93/group',scale+'/group')

Что довольно странно, но все же не могу найти более элегантных решений.

Фактически, глядя на код связанного расширения колбы, он делает то же самое, но управляет общим случаем.

2

Искали решение, они придумали это решение, где

  • Надстройка не требуется

  • Нет жесткого кода URL

Ключ в том, чтобы понять, что Jinja2 имеет возможность рендеринга javascript из коробки.

Настройте папку шаблона примерно так, как показано ниже: 

/template
    /html
        /index.html
    /js
        /index.js

В вашем views.py 

@app.route("/index_js")
def index_js():
    render_template("/js/index.js")

Теперь вместо того, чтобы обслуживать javascript из вашей статической папки. Вы будет использовать: 

<script src="{{ url_for('index_js') }}"></script>

В конце концов, вы генерируете javascript на лету, это больше не статический файл.

Теперь, внутри вашего файла javascript, просто используйте url_for, как и в любом файле html.

Например, используя Jquery, чтобы сделать запрос Ajax 

$.ajax({
  url: {{ url_for('endpoint_to_resource') }},
  method: "GET",
  success: call_back()
})
2

В моем случае, Я пытался динамически создавать URL-адреса

Я решил свою проблему следующим образом (Примечание: я поменял синтаксис Angular на {[x]}: 

<ul>
    <li ng-repeat="x in projects">
        {[x.title]}
        {% set url = url_for('static',filename="img/") %}

        <img src="{{url}}{[x.img]}">
    </li>
</ul>
0

Я пытался вызвать маршрут колбы, когда нажата кнопка. Он должен собрать ответ и обновить div. Страница не должна перезагружаться.

Для этого я использовал jquery.

Вот код: 

@app.route('/<name>')
def getContent(name):
    return 'This is %s' % name

HTML: 

    <div id="mySpace" class="my-3">Count</div>

    <button id="next_id" class="btn btn-primary">Press</button>

    <script>
        $('#next_id').click(function (){
            $.get('/aroy', function(data, status){
            $('#mySpace').html(data);
        });
        });
    </script>
-1

Я предлагаю следующее: 

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

Отлично работает для меня

-2