Twitter Typeahead.js 0.10.0现在使用Bloodhound.js与服务器进行交互。
是否可能将其使用的模板引擎从handlebars更改为underscore.js或knockout.js punches的模板引擎?
Twitter Typeahead.js 0.10.0现在使用Bloodhound.js与服务器进行交互。
是否可能将其使用的模板引擎从handlebars更改为underscore.js或knockout.js punches的模板引擎?
哦,我对显而易见的事情视而不见了。在配置 Twitter Typeahead 时,在模板选项中,在建议子选项中;你可以选择你的视图引擎。为了举例说明(取自http://twitter.github.io/typeahead.js/examples/):
$('.example-twitter-oss .typeahead').typeahead(null, {
name: 'twitter-oss',
displayKey: 'name',
source: repos.ttAdapter(),
templates: {
suggestion: Handlebars.compile([
'<p class="repo-language">{{language}}</p>',
'<p class="repo-name">{{name}}</p>',
'<p class="repo-description">{{description}}</p>'
].join(''))
}
});
以上代码使用Handlebars模板引擎。但是您可以使用支持compile函数的任何模板引擎。编译函数获取用户模板并根据需要处理它以获取需要呈现的HTML。如果您想使用underscore,请将其扩展为支持名为"compile"的函数并引用它。下面是说明此内容的代码。
;(function (_) {
'use strict';
_.compile = function (templ) {
var compiled = this.template(templ);
compiled.render = function (ctx) {
return this(ctx);
}
return compiled;
}
})(window._);
这篇文章来自Alan Greenblatt。链接在这里:http://blattchat.com/2013/06/04/twitter-bootstrap-typeahead-js-with-underscore-js-tutorial。他的Twitter Typeahead示例是过时的,因为它们是为Twitter Typeahead 0.9.3版本制作的,缺少Bloodhound.js。但是,它提供了一个很好的编译函数用于Underscore模板引擎。
现在,使用Underscore模板,代码将如下所示:
$('.example-twitter-oss .typeahead').typeahead(null, {
name: 'twitter-oss',
displayKey: 'name',
source: repos.ttAdapter(),
templates: {
suggestion: _.compile([
'<p class="repo-language"><%=language%></p>',
'<p class="repo-name"><%=name%></p>',
'<p class="repo-description"><%=description%></p>'
].join(''))
}
});
好消息是,正如 Steve Pavarno 所说,您不再需要模板引擎了。您可以通过传递一个函数来实现所需的结果,方法如下:
// ...
templates: {
suggestion: function(data) { // data is an object as returned by suggestion engine
return '<div class="tt-suggest-page">' + data.value + '</div>';
};
}
_.template()
也可以正常工作。 - luwessuggestion: _.template(
。它们都会返回函数,Typeahead不会在**_.compile和_.template**之间看到任何区别。干杯 - luwesHogan.compile(...)
,但不起作用。如果您有解决方案,请参见https://dev59.com/34Hba4cB1Zd3GeqPR3wf! - isapir