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模板。

第一种方法:您必须在html文件中使用带有<script></script>标记的内联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.