Question

我正在尝试通过flask应用程序定义typeahead.js的模板。

我正在寻找的解决方案是覆盖默认（jinja2）模板，或使用默认值来定义新模板。

更新：

这是我到目前为止所拥有的。除“值”之外的任何其他值都不起作用。

$('#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
});

由于Flask不处理像main.js这样的静态文件，因此Jinja2不会与Hogan语法冲突，你可以随心所欲地做任何事情。

希望它有所帮助。

Answer 2

您可以使用{% raw %} Jinja模板标记来转义Jinja2 documentation中提及的{{}}：

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

Twitter Typeahead.js与Flask Jinja2模板

2 个答案: