在外部JavaScript文件中使用Jinja2模板引擎

Question

在外部JavaScript文件中使用Jinja2模板引擎

31

我正在使用Python和Flask开展一个网络项目。我想知道是否可以在外部JavaScript文件中访问Python发送的参数？在HTML文件或嵌入HTML文件的JS中，这个功能运行良好，但是在外部的JavaScript文件中却不行。

请看下面。

Python代码：

@app.route('/index')
def index():
    return render_template('index.html', firstArg = 2, secondArg = 3)

index.html的代码

...
<body>
    <p>The first arg is {{firstArg}}.</p>
    <script src="index.js"></script>
</body>
...

还有 index.js 文件

window.onload=function(){
    console.log('{{secondArg}}');
};

因此，第一个参数在 HTML 文件中是正确的，但是在 JS 文件中第二个参数无法工作。浏览器显示 Unexpected token {。

也许在外部 JS 中无法使用它吗？

否则，我将需要将 secondArg 插入 HTML 中作为输入数据，并在 JS 文件中获取它，但这不是很清晰。

如果有人能帮忙，谢谢。

- Loric

2个回答

3

此外，您可以创建index_js.html（或相同的index.js）文件，并在需要时使用{% include 'index_js.html' %}。

1）如果您喜欢index_js.html，请在此处使用 <script>一些JS模板化代码</script> ，然后在您的模板html中使用 {% include 'index_js.html' %}。

2）或者，如果您喜欢index.js，请执行<script> {% include 'index.js' %} </script>。

- Дмитрий Валетов

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- t.animal · Accepted Answer

index.js可能并没有被你的flask实例所提供，但它绝对不会被你的模板引擎处理，即使它被处理了，它也不会和请求它的html文件拥有相同的上下文。

我认为最干净的解决方案是在你的index.js中编写一个初始化函数，并从html文件中调用它：

<body>
    <p>The first arg is {{firstArg}}.</p>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript">
        yourInitFunction({{secondArg}});
    </script>
</body>

你同样可以告诉Flask也要路由 index.js：@yourapp.route('index.js') 就像你使用 route('/index') 一样，不过这可能并不是一个好主意。