Question

我对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仍然只反映列表中第一项的值。

有什么想法吗？谢谢！

Answer 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给出的值。

目前还不清楚你在问什么，但我希望我向你明确表示你想要实现的目标是不可能的。

Answer 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

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

2 个答案: