如何设置此 javascript 文件中的变量以匹配 Flask/Python 中的变量？

Question

我有一个 Javascript 文件，可以启用动态下拉菜单（即从一个下拉菜单中选择会影响其他菜单）。我想将此文件与多种形式结合使用，但我已将此文件中的起始变量硬编码为 html 元素 'inverter_oem' 和 'inverter_model_name'.

在其他形式中，我将需要引用不同的对象。

我怎样才能做到这一点？我想以这种方式在 Javascript 中创建变量：

const selecting_dropdown_menu = document.getElementById(variable1_from_flask);
const filtered_dropdown_menu = document.getElementById(variable2_from_flask);

我目前的方法是尝试使用 render_template 从 Flask 路由传递变量。（我也尝试过其他堆栈溢出解决方案，但没有成功）

@db_queries.route('/db_query_dynamic_form/<form_name>', methods=['GET', 'POST'])
def db_query_dynamic_form(form_name):
    # use methods to get form and endpoint for outside loop

    if request.method == 'POST':
        # inside loop when form complete
        return render_template('list.html', result=query_results["filtered_tables"], columns=query_results["column_names"])

    # added variable to pass to jinja template
    return render_template(form_endpoint["endpoint"], form=form_endpoint["form"], var="value1")

jinja模板形式如下

% extends "base.html" %}
{% block title %}Inverter Dynamic  Search{% endblock %}
{% block heading %}Inverter Dynamic Search{% endblock %}
{% block content %}

  <form method="POST">
    {{ form.hidden_tag()}}
    {{ form.inverter_oem.label }}{{ form.inverter_oem }}<br>
    {{ form.inverter_model_name.label }}{{ form.inverter_model_name }}<br>
    {{form.submit()}}

    {{test}}
  </form>
    <script>
      myVar = {{ var }}
    </script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="{{ url_for('static', filename='search_inverter_dynamic.js') }}"></script>


{% endblock %}

但是，当我尝试

时，我在 javascript 文件中没有得到值

console.log(myVar);

这是带有“硬编码”变量的原始 JScode

//acquire inverter_oem value from form
const inverter_oem_select = document.getElementById('inverter_oem');
const inverter_model_name_select = document.getElementById('inverter_model_name');

//add event listener to capture selected oem in dropdown
inverter_oem_select.addEventListener('click', (e) => {
    let oem = '../modelNameByOEM//' +  e.target.value;
    console.log(oem);
    getIt(oem);
});

//recover a JSON containing the list of models from a specific oem
async function getIt(input) {
    try {
        const res = await axios.get(input);
        console.log(res.data);
        optionHTML = '';
        for (let modelName of res.data.modelNameOem) {
            //console.log(res.modelName.name);
            optionHTML += '<option value="' + modelName.name + '">' + modelName.name + '</option>';
            //console.log(optionHTML);
        }
        inverter_model_name_select.innerHTML = optionHTML;

    } catch (err) {
        console.log('Could not reach endpoint modelNameByOEM')
        console.log(err);
    };
}

Answer 1

Jinja 不知道您要在 JavaScript 环境中传递变量，因此它无法在字符串变量周围自动添加引号。它只是将 {{ var }} 替换为 value1 导致语法错误。加上引号就可以在JS环境里面访问myVar：

<script>
myVar = "{{ var }}"
</script>

注意：如果你想传递更复杂的数据结构and/or用户提交的值，你应该查看安全呈现数据的tojson filter。

如何设置此 javascript 文件中的变量以匹配 Flask/Python 中的变量？

How do I set the variables in this javascript file to match variables from Flask/Python?

javascript

python

jinja2

flask