使用Jinja动态更新Javascript变量? [英] Dynamically update Javascript variables using Jinja?

问题描述

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

I have a web form created that requires template creation by the user. Calling all previous entries that are templates isn't an issue, but passing the information to the form when called seems to be tricky. Basically I want the user to be able to select a template from the dropdown (See the screenshots and stuff below), then based on their selection, update the variables in the script to autofill form data. Right now, it only selects the most recent entry. Is this possible just using python/flask/javascript or am I missing something? Any help would be appreciated! Thanks!

模板下拉列表

    <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()

推荐答案

您的错误是在循环中创建Javascript代码.您不需要这样做.

Your mistake is to create Javascript code in a loop. You don't need to do this.

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

What you want to do is think of the data sent to the browser as independent. Make it work first without Flask and Jinja2. Create a static page that works and does what you want.

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

The following code would work with static data:

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> 元素和Javascript代码，用于将所选的选项值复制到< div> 中.请注意，JavaScript代码对所涉及的数据一无所知.没有客户端名称存储在代码中.这个小功能要做的就是将值从当前选择的选项复制到其他地方.

That's HTML for a select box, a separate <div> element, and Javascript code to copy the selected option value into the <div>. Note that the Javascript code doesn't know anything about what data is involved; no client names are stored in the code. All that the small function does is to copy the value from the currently selected option, to somewhere else.

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

Once that works on its own you can start thinking about how you are going to insert the values from your application. In the above code, all that needs replacing is the dropdown options, because the Javascript code can then access everything it needs from the <select> element value.

因此完全不需要生成Javascript代码 ，您只需生成< option> 元素，就像您在问题中所做的一样.

So the Javascript code doesn't need to be generated at all, you only generate the <option> elements, as you already did in your question.

您几乎不需要生成动态Javascript代码，如果不需要，它对您的应用程序会更好.CDN可以提供静态Javascript代码，并将其缓存在浏览器中，从而使您的应用无需为所有客户端一次又一次地提供代码.尽一切可能尽量减少这种情况.

You rarely need to generate dynamic Javascript code, and it would be much better for your app if you don't. Static Javascript code can be served by a CDN and cached in the browser, removing the need for your app to keep serving that again and again for all clients. Try to minimise that whenever you can.

相反，仅生成代码需要对其进行操作的数据.

Instead, generate just the data that the code needs to operate on.

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

• You can put that information in HTML tags. In the above example, your data is put in the repeated <option> tags. Or
• you could add data attributes to your HTML, which are accessible both to Javascript code and to CSS. Or
• use AJAX to load data asynchronously; e.g. when you pick an option in the <select> box, use Javascript and AJAX to call a separate endpoint on your Flask server that serves more data as JSON or ready-made HTML, then have the Javascript code update your webpage based on that. Or
• generate JSON data and put it directly into your HTML page. Just a <script>some_variable_name = {{datastructure|tojson|safe}};<script> section is enough; then access that some_variable_name from your static Javascript code to do interesting things on the page. JSON is a (almost entirely a) subset of Javascript, and the way the tojson filter works is guaranteed to produce a Javascript-compatible data structure for you. The browser will load it just like any other embedded Javascript code.

这篇关于使用Jinja动态更新Javascript变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！