Настройка типа Bootstrap Twitter

Question

Я пользуюсь официальным examples from Twitter. Основная проблема, я, вероятно, не знаю, как использовать монстра Хогана. JS сторона:

$("#search_name").typeahead({ 
    name: 'name', 
    remote: { 
     url: '/entities/search_autocomplete.json?query=%QUERY', 
     template: '<p><strong>{{id}}</strong> – {{name}}</p>', 
     engine: Hogan 
     } 
}); 

сервер возвращает данные в формате JSON, структура:

[{\"id\":1234,\"name\":\"Blah blah...\",\"tokens\":[\"blah...\",\"blah\"]}] 

Answer 1

Просто взял этот код у одного из наших проектов, поможет вам понять, необходимую разметку преобразования внешние массивы JSON и вывода в пользовательские автозаполнения строки:

$('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.

Я также рекомендую посмотреть, что Graph API call, чтобы лучше понять преобразование массива.

Надеюсь, это поможет :)