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

Question

我需要在 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？

Answer 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.