Question

我正在构建Flask应用程序，并使用Handlebars模板进行客户端HTML呈现。

我有以下非常基本的把手模板：

<script id="source-template" type="text/x-handlebars-template">
    <div class="source-data">
        <span>{{last4}}</span>
        <span>Exp : {{exp_month}} / {{exp_year}}</span>
    </div>
</script>

我使用它如下（与把手教程完全相同）：

var source = $('#source-template').html();
var template = Handlebars.compile(source);
var context ={
    last4:'1234',
    exp_month:'12',
    exp_year:'2020'
};  
var html = template(context);
console.log(html);

然而，它似乎并没有将我的上下文中的数据插入到模板中。控制台输出是：

<div class="source-data">
    <span></span>
    <span>Exp : / </span>
</div>

我在这里遗漏了什么吗？我不确定会出现什么问题，因为我基本上复制了handlebars example。

Answer 1

由于我使用Flask，因此我将脚本编写在由Jinja呈现的html文件中。

由于没有名为last4，exp_month，or exp_year的变量传入Flask的render_template()函数，因此将其替换为零，留下了手柄模板没有变数。

解决方法是在脚本周围使用{% raw %}，以便Jinja不会将这些解释为变量：

<script id="source-template" type="text/x-handlebars-template">
    {% raw %}
    <div class="source-data">
        <span>{{last4}}</span>
        <span>Exp : {{exp_month}} / {{exp_year}}</span>
    </div>
    {% endraw %}
</script>

把手模板没有填写上下文

1 个答案: