Как я могу получить доступ к переменным, переданным шаблону html из файла javascript? [Дубликат]
2 ответа
Если вы хотите отобразить файл с помощью Jinja, вам нужно вызвать render_template на нем и передать ему нужные значения. Очевидно, что это не связано с прямой ссылкой на статический файл. Одним из решений является использование блока include Jinja. Это требует, чтобы «myjs.js» находился в папке «templates / js» и будет включать его в визуализированный шаблон, передавая весь контекст шаблонов включенному шаблону.
<script>{% include 'js/myjs.js' %}</script>
Лучшее решение не требует рендеринга js для каждого запроса и вместо этого передает параметры js-функциям из вашего шаблона.
<script src="{{ url_for('static', filename='js/myjs.js') }}"></script>
<script>
my_func({{ my_var|tojson }});
</script>
Я использовал другой способ загрузить файл javascript, указанный на странице html:
Во-первых, я определяю некоторые переменные внутри тегов <head></head>, и поэтому я вызываю свой файл javascript:
<head>
...
<script src="/static/js/jquery.js"></script>
<script type=text/javascript>
$(document).ready(function() {
$link_subcat = "{{ url_for('load_subcategories') }}";
$link_cat = "{{ url_for('load_categories') }}";
});
</script>
<script src="{{ url_for('static', filename='finances.js') }}"></script>
...
Это мое содержимое файла javascript:
$(document).ready(function() {
$("#category").change(function() {
$.ajax({
type: "POST",
url: $link_subcat,
data: {cat: $(this).val()},
success: function(data) {
$("#subcategory").html(data);
}
});
});
$("input[name=type]").change(function() {
$.ajax({
type: "POST",
url: $link_cat,
data: {type: $('input[name="type"]:checked').val()},
success: function(data) {
$("#category").html(data);
}
});
});
});
Этот подход работает для меня.