Twitter的Bootstrap预先设置 [英] Twitter's Bootstrap typeahead setup
问题描述
我正在使用官方来自Twitter的示例。
主要问题,我可能不知道如何使用Hogan怪物。 JS方面:
I'm using the official examples from Twitter. The main problem, I probably don't know how to use the Hogan monster. The JS side:
$("#search_name").typeahead({
name: 'name',
remote: {
url: '/entities/search_autocomplete.json?query=%QUERY',
template: '<p><strong>{{id}}</strong> – {{name}}</p>',
engine: Hogan
}
});
服务器以JSON格式返回数据,结构为:
The server is returning the data in JSON, the structure is:
[{\"id\":1234,\"name\":\"Blah blah...\",\"tokens\":[\"blah...\",\"blah\"]}]
推荐答案
刚从我们的一个项目中获取此代码,应该可以帮助您了解转换外部JSON数组并在自定义自动完成提示中输出所需的标记:
Just took this code from one of our projects, should help you understand the necessary markup of converting external JSON arrays and outputting in a custom autocomplete prompt:
$('input').typeahead({
header: 'Your Events',
template: [
'<img class="ta-thumb" src="https://graph.facebook.com/{{id}}/picture?type=square" />',
'<p class="ta-h1">{{name}}</p>',
'<p class="ta-p">{{start_time}}</p>'
].join(''),
limit: 3,
remote: {
url: 'https://graph.facebook.com/me/events?access_token=' + access_token,
filter: function(parsedResponse) {
var dataset = [];
for(i = 0; i < parsedResponse.data.length; i++) {
dataset.push({
name: parsedResponse.data[i].name,
start_time: parsedResponse.data[i].start_time,
id: parsedResponse.data[i].id,
value: parsedResponse.data[i].name,
tokens: [parsedResponse.data[i].id, parsedResponse.data[i].name]
});
}
return dataset;
},
},
engine: Hogan
});
您需要下载 Hogan.js 模板编译器并将其包含在您的标记中(例如将其用作外部脚本或通过模块加载器,如 Require.js )。然后这将设置 Hogan
变量。
You need to download the Hogan.js template compiler and include it in your markup (e.g. using it as an external script or via a module loader like Require.js). This will then set the Hogan
variable.
我还建议查看图谱API调用,以更好地理解阵列转换。
I'd also recommend looking at that Graph API call to understand the array conversion better.
希望这有助于:)
这篇关于Twitter的Bootstrap预先设置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!