Могу ли я изменить шаблонный шаблон в Typeahead.js?

Ответ 1

О, я был слеп к очевидному. При настройке 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. Но вы можете использовать любой механизм шаблонов, который поддерживает функцию компилировать. Функция компиляции принимает шаблон пользователя и обрабатывает его по мере необходимости, чтобы получить HTML-код, который нужно визуализировать. Если вы хотите использовать подчеркивание, расширьте его, чтобы поддерживать функцию "компилировать" и ссылаться на нее. Ниже показан код, иллюстрирующий это.

;(function (_) {
    'use strict';

    _.compile = function (templ) {
        var compiled = this.template(templ);
        compiled.render = function (ctx) {
            return this(ctx);
        }
        return compiled;
    }
})(window._);

Я получил это от Алана Гринблатта. Ссылка: http://blattchat.com/2013/06/04/twitter-bootstrap-typeahead-js-with-underscore-js-tutorial. Его примеры типа twitter датированы тем, что они были сделаны для twitter typeahead версии 0.9.3, в которой отсутствует bloodhound.js. Тем не менее, он обеспечивает хорошую функцию компиляции для шаблона шаблонов подчеркивания.

Теперь, используя шаблон подчеркивания, код будет выглядеть так:

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

Ответ 2

Хорошей новостью является то, что, как заявил Стив Паварно, вам больше не нужен механизм шаблонов. Вы можете добиться желаемого результата, передав такую ​​функцию:

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