如何设置此 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 环境中传递变量，因此它无法自动在字符串变量周围添加引号。它只是用value1 替换{{ var }} 导致语法错误。加引号就可以在JS环境中访问myVar了：

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

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