使用Hogan迁移到Typeahead 0.10+

Question

我已经将Typeahead 0.9.3与Hogan 2一起使用了一段时间,而且设置非常简单.

在0.9.3我做了类似的事情:

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

根据迁移指南0.10 "现在需要预编译模板",所以在0.10.3我正在尝试:

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

但它不起作用.我收到一个错误:Uncaught TypeError: object is not a function

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

有任何想法吗？TIA!

Answer 1

正如Jake Harding所说,现代浏览器的解决方案是这样的:

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

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

不幸的是,IE <9不支持Function.prototype.bind(),因此如果您需要支持不起作用的旧浏览器.

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

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