Как передать переменную flask / jinja2 в сценарий js? - PullRequest
0 голосов
/ 13 июля 2020

Я пытаюсь написать сценарий, который получает имя пользователя из приложения flask и автоматически отображает его в шаблоне. В основном у меня есть эта строка в макете . html:

<div class="sidebar-heading" id= "my_username"> {% block sidebar %} Start Bootsrap {% endblock %} </div>

Затем index. html, то есть моя главная страница получает имя пользователя:

{% block sidebar %} {{ username }} {% endblock %}
 <script src= "static/js/user_name.js"> </script>

Я хочу сохранить эти данные в js и распечатать их в других шаблонах. user_name. js:

var username = document.getElementById('my_username').innerHTML;

document.querySelector("#insert_user").innerHTML = username.innerHTML

Когда я передаю это значение в новый шаблон:

 {% block sidebar %}
     <div id = "insert_user" > </div>
    {% endblock %}
<script src= "static/js/user_name.js"> </script>

Вывод распечатывается на новой странице html говорит "undefined"

Что я сделал не так? Спасибо!

Ответы [ 2 ]

0 голосов
/ 13 июля 2020

Как-то забыл основы программирования. Мне удалось решить проблему, сделав get_userName. js

  //get the username
var username = document.getElementById('my_username').innerHTML;

//store the username
myStorage = window.localStorage;
myStorage.setItem("Username",username)

и post_userName. js

// function to load a script
function includeJs(jsFilePath) {
    var js = document.createElement("script");

    js.type = "text/javascript";
    js.src = jsFilePath;

    document.body.appendChild(js);
}

includeJs("static/js/get_userName.js");


    //update the sidebar username
    username = localStorage.getItem('Username')
    document.querySelector("#my_username").innerHTML = username
0 голосов
/ 13 июля 2020

Если я понимаю ваш вопрос, добавление

<script>var username = "{{ username }}";</script>

в ваш базовый шаблон должно сделать его доступным для скриптов в других шаблонах.

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