車把模板未填充上下文

Question

我正在構建一個Flask應用程序，並具有一些客戶端HTML渲染，我想使用Handlebars模板來做。

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

<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示例 。

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>