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 
});