使用Hogan迁移到Typeahead 0.10+ [英] Migrating to Typeahead 0.10+ with Hogan

问题描述

我一直在使用Typeahead 0.9.3和Hogan 2一段时间，而且设置非常简单。

I have been using Typeahead 0.9.3 with Hogan 2 for a while and it was very straight forward to setup.

在0.9.3中我做了类似的事情：

in 0.9.3 I did something like:

$('input.search-query').typeahead([
     {
         name:     "pages"
        ,local:    localSuggestions
        ,template: '<div class="tt-suggest-page">{{value}}</div>'
        ,engine:   Hogan
    }
]);

根据迁移指南0.10 现在需要预编译模板，所以在0.10 .3我正在尝试：

According to the Migration Guide to 0.10 "Precompiled Templates are Now Required", so in 0.10.3 I'm trying:

$('input.search-query').typeahead(null, {
     name:     "pages"
    ,source:   taSourceLocal.ttAdapter()
    ,templates: {
         suggestion: Hogan.compile('<div class="tt-suggest-page">{{value}}</div>')
     }
});

但不起作用。我收到一个错误：未捕获TypeError：对象不是函数

but it does not work. I get an error: Uncaught TypeError: object is not a function

如果还有另一个极简主义模板引擎可以工作我会考虑它，但它必须很小。我不想添加像Handlebars这样的大文件或像Underscore这样的整个库。

If there is another, minimalist template engine that can work I will consider it as well, but it has to be small. I don't want to add a huge file like Handlebars or a whole library like Underscore.

任何想法？ TIA！

推荐答案

如Jake Harding所述，适用于现代浏览器的解决方案如下所示：

As stated by Jake Harding, the solution for modern browsers is like so:

var compiledTemplate = Hogan.compile('<div class="tt-suggest-page">{{value}}</div>');

$('input.search-query').typeahead(null, {
    // ...
    templates: {
        suggestion: compiledTemplate.render.bind(compiledTemplate);
    }
});

不幸的是， Function.prototype.bind（）。 9 ，所以如果你需要支持那些无效的旧浏览器。

Unfortunately, Function.prototype.bind() is not supported by IE < 9, so if you need to support older browsers that will not work.

好消息是由Steve Pavarno陈述你不再需要模板引擎了。您可以通过传递如下函数来实现所需的结果：

The good news is that as stated by Steve Pavarno you don't need a template engine anymore. You can achieve the desired result by passing a function like so:

    // ...
    templates: {
        suggestion: function(data) { // data is an object as returned by suggestion engine
            return '<div class="tt-suggest-page">' + data.value + '</div>';
        };
    }

这篇关于使用Hogan迁移到Typeahead 0.10+的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！