时间戳

首页 > 解决方案 > 使用 Jinja 动态更新 Javascript 变量？

javascript - 使用 Jinja 动态更新 Javascript 变量？

问题描述

我创建了一个需要用户创建模板的 Web 表单。调用所有以前的模板条目不是问题，但在调用时将信息传递给表单似乎很棘手。基本上我希望用户能够从下拉列表中选择一个模板（参见下面的屏幕截图和内容），然后根据他们的选择，更新脚本中的变量以自动填充表单数据。现在，它只选择最近的条目。这可能只是使用 python/flask/javascript 还是我错过了什么？任何帮助，将不胜感激！谢谢！

模板下拉

    <label for="template_select">Select Template</label>
<select class="form-control" name="template_select" id='template_select' onchange='changeTemplate()'>
<option value=''></option>

{% for template_info in template_search %}
<option value='{{template_info.client_name}}'>{{template_info.client_name}}</option>
{% endfor %}

</select>

Javascript更改值

{% for template_info in template_search %}

<script>
function changeTemplate(){
    var template = document.getElementById('template_select').value;
    document.getElementById('client_name').value='{{template_info.client_name}}';
    document.getElementById('client_name').innerHTML='{{template_info.client_name}}';
}
</script>

{% endfor %}

Python 传入查询

template_search = newmatter_model.NewClientMatter.query.filter_by(
            creator=verifier, is_template='on').all()

标签： javascriptpythonflask

解决方案

您的错误是循环创建 Javascript 代码。你不需要这样做。

您要做的是将发送到浏览器的数据视为独立的。让它在没有 Flask 和 Jinja2 的情况下首先工作。创建一个可以正常工作并执行您想要的操作的静态页面。

以下代码适用于静态数据：

function changeTemplate(){
    var template = document.getElementById('template_select').value;
    document.getElementById('client_name').innerHTML = template;
}
<label for="template_select">Select Template</label>
<select class="form-control" name="template_select" id="template_select" onchange="changeTemplate()">
<option value=""></option>

<option value="Client 1">Client 1</option>
<option value="Client 2">Client 2</option>
<option value="Client 3">Client 3</option>
</select>

<div id="client_name"><i>No client set</i></div>

这是一个选择框的 HTML，一个单独的<div>元素，以及用于将所选选项值复制到<div>. 请注意，Javascript 代码对所涉及的数据一无所知；没有客户名称存储在代码中。这个小函数所做的就是将当前选择的选项中的值复制到其他地方。

一旦它自己工作，您就可以开始考虑如何从应用程序中插入值。在上面的代码中，所有需要替换的是下拉选项，因为 Javascript 代码可以从<select>元素值访问它需要的所有内容。

因此，根本不需要生成Javascript 代码，您只需生成<option>元素，就像您在问题中所做的那样。

您很少需要生成动态 Javascript 代码，如果您不这样做，它对您的应用程序会更好。静态 Javascript 代码可以由 CDN 提供并缓存在浏览器中，无需您的应用程序一次又一次地为所有客户端提供服务。尽量减少这种情况。

相反，只生成代码需要操作的数据。

  • 您可以将该信息放在 HTML 标记中。在上面的示例中，您的数据被放置在重复的<option>标签中。或者
  • 您可以将数据属性添加到 HTML中，Javascript 代码和 CSS 都可以访问这些属性。或者
  • 使用AJAX异步加载数据；例如，当您在<select>框中选择一个选项时，使用 Javascript 和 AJAX 在您的 Flask 服务器上调用一个单独的端点，该端点以 JSON 或现成的 HTML 形式提供更多数据，然后让 Javascript 代码基于此更新您的网页。或者
  • 生成 JSON 数据并将其直接放入您的 HTML 页面。一<script>some_variable_name = {{datastructure|tojson|safe}};<script>节就够了；然后some_variable_name从您的静态 Javascript 代码中访问它以在页面上做有趣的事情。JSON 是 Javascript 的（几乎完全是一个）子集，tojson过滤器的工作方式保证为您生成与 Javascript 兼容的数据结构。浏览器将像任何其他嵌入式 Javascript 代码一样加载它。

推荐阅读