Jinja 模板在 script.js 中不起作用答案

【问题标题】：Jinja templating not working in script.jsJinja 模板在 script.js 中不起作用
【发布时间】：2021-06-07 17:02:51
【问题描述】：

我需要在 element.innerHTML 中包含 jinja 模板，但 jinja 不起作用。

代码 script.js：

contentDiv.innerHTML = getContent(fragmentId);

function getContent(fragmentId) {
var pages = {

    quad1: `
            <form class="form-inline" method="POST" id="form1">
                <h3>
                    <input type="number" id="quad_a1" name="input_a" class="form-control mx-2 col-1" placeholder="a">
                    <b>x&#178; +</b>
                    <input type="number" id="quad_b1" name="input_b" class="form-control mx-2 col-1" placeholder="b">
                    <b>x +</b>
                    <input type="number" name="input_c" class="form-control mx-2 col-1" placeholder="c">
                    <b>=</b>
                    <input type="number" name="input_d" class="form-control mx-2 col-2" placeholder="Default(0)">
                    <button type="submit" class="btn btn-primary float-right mr-5" onclick="return empty_quad()">Solve</button>
                </h3>
            </form>
            {{ sol }}
            `,
.
.
.
};
return pages[fragmentId];
}

但输出实际上是 {{ sol }}，而不是 sol 的值：

那么如何在script.js中访问flask的render_template()传递的变量sol呢？

【问题讨论】：

看看这个，可能对你有帮助：stackoverflow.com/a/62622741/12368419

标签： flask jinja2

【解决方案1】：

你不能在你的 js 文件中使用 jinja2 模板。

第一种方法：您必须使用<script></script>标签在html文件中使用内联javascript，然后您可以通过将其分配给javascript变量来访问sol变量

<script> sol = "{{sol}}" </script> // {{sol}} should be between quotation marks

第二种方法：如果你有单独的js文件。你可以制作一个 div 标签，定义它的类并将它的 id 设置为{{sol}}。通过类名获取元素，然后获取它的id。

HTML

<div class="myclass" id="{{sol}}" style="display:none"></div>

javascript

elem= document.getElementsByClassName("myclass") ;
console.log(elem.id) // this is the sol value.

【讨论】：