如何为 jinja 模板重新加载 javascript？答案

【问题标题】：How to reload javascript for jinja template?如何为 jinja 模板重新加载 javascript？
【发布时间】：2013-07-26 22:39:17
【问题描述】：

我对 jinja2 比较陌生（而且绝不是网络开发专家），我无法让与 jinja 模板关联的 javascript 根据程序。

基本上，我有一个模板遍历项目列表：

{% for item in items %}
<p> {{item['property a']}}</p>
blah blah blah`

然后我调用我在该 for 循环中导入的另一个模板：

{% import 'secondTemplate.html' as s %} //not sure whether this matters if it goes inside or outside the for loop
<p> {{s.doSecondStuff(item)}}</p>

一切正常。第二个模板每次都执行每个项目，这是我想要的。

但是，我有一些与 secondTemplate.html 关联的 secondTemplate.js，它对传递给 secondTemplate.html 的变量进行操作。我的问题是 secondTemplate.js 只对第一项的值进行操作。

Loading external script with jinja2 template directive 的最佳答案似乎可行，所以我一直在尝试将以下内容放入 for 循环中：

{% block javascript %}
    <script type="text/javascript">
        {% include "secondTemplate.js" %}
    </script>
{% endblock %}

但是js仍然只反映列表中第一项的值。

有什么想法吗？谢谢！

【问题讨论】：

你的 JavaScript 看起来/做什么？
能否提供完整的模板代码？我在下面写了一个您可能会觉得有用的答案，但它没有回答您的问题。
对我来说，您似乎在混合服务器端和客户端处理。 secondTemplate.js 究竟做了什么？为什么不在服务器上用 Python 来做呢？你在那儿真正在做什么？不要抽象！告诉我们您最终想要达到的目标。

标签： javascript jinja2

【解决方案1】：

如果您使用浏览器打开 Flask 应用程序，Flask 会查看您定义的路由并选择它认为最合适的路由，例如：

@app.route('/<name>')
def index(name):
    return render_template('index.htm', var1=name)

它像任何编程语言中的普通函数一样执行函数的内部。重点是：该函数只返回一个 HTML 字符串。 它不会做任何“魔术”来将有关变量名的任何信息传递给浏览器。具体来说，如果index.htm 看起来像这样：

<h1>Hello {{ name }}!</h1>

然后render_template('index.htm', name="world")返回一个内容为"<h1>hello world!</h1>"的字符串，这就是你的视图返回的，这就是Flask给浏览器的。

因此，浏览器以及您的 Javascript 代码完全不知道 HTML 的哪一部分是变量，哪一部分不是变量。当您在浏览器中执行 Javascript 时，您的 Flask 应用程序已经忘记了客户端以及给定的 name 的值。

真的不清楚你在问什么，但我希望我已经向你说明了你试图实现的目标是如何不可能以这种方式实现的。

【讨论】：

【解决方案2】：

我不熟悉 jinja，但是如果你想重新加载 js 文件（如果我理解你的话），有一个像下面这样的技巧。让我们用 id 制作所有标签，所以：

<script src="be/happy.js" id ="be/happy.js"></script>
<script src="be/very/happy.js" id ="be/very/happy.js"></script>

等等。现在是线索。我们可以强制浏览器重新加载文件，使用这个方法：

var s = document.getElementById('be/happy.js'); //get access to node
d.parentNode.removeChild(s); //remove it from document
delete d; //destroy element

d = document.createElement('script'); //create new script tag
d.src = d.id = 'be/happy.js'; //add the same value to id and src attribute
document.getElementsByTagName('head')[0].appendChild(d); //append child again, what force browser to script reload

【讨论】：