Twitter Typeahead.js與燒瓶Jinja2模板

Question

我想通過燒瓶應用程序定義typeahead.js的模板。

我正在尋找的解決方案是覆蓋默認（jinja2）模板，或使用默認值來定義新模板。

更新：

這是我到目前爲止。除「value」以外的任何其他值都不起作用。

$('#search').typeahead({ 
    name: 'Search', 
    local: { 
     value: 'String1', 
     tokens: ['1','one'], 
     name: 'StringTest' 
    }, 
    template: '<p>Template {{value}}{{name}}</p>', // Only shows "Template String1" 
    engine: Hogan 
}); 

這裏是我的模板是什麼樣子

<script src='http://twitter.github.com/typeahead.js/releases/latest/typeahead.js'</script> 
<script src="http://twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script> 
<script src="static/js/search.js"></script> // Hard coded to see if it works.. 

Answer 1

我看到有幾種方法可以達到你想要的。最簡單的方法是將typeahead.js代碼分隔到另一個文件中。

所以，在你的主模板，你可以有：

<script src="/js/typeahead.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    var prefetch_url = '{{ url_for('jsonData') }}'; // not so sure if you need the quote here? 
</script> 
<script src="/js/main.js" type="text/javascript"></script> 

... your template code ... 

而在main.js文件，你可以初始化的typeahead.js正常：

$('#search').typeahead.js({ 
    name: 'Search', 
    prefetch: prefetch_url, 
    template: ... ,// a normal Hogan template 
    engine: Hogan 
}); 

由於瓶不處理靜態文件如main.js，Jinja2不會與Hogan語法發生衝突，您可以在那裏做任何您想做的事情。

希望它有幫助。

Answer 2

可以使用{% raw %}神社模板標籤逃脫{{}}作爲Jinja2 documentation提到：

$('#search').typeahead({ 
    name: 'Search', 
    local: { 
     value: 'String1', 
     tokens: ['1','one'], 
     name: 'StringTest' 
    }, 
    template: {% raw %}'<p>Template {{value}}{{name}}</p>'{% endraw %}, 
    engine: Hogan 
});