cómo utilizar el manillar/bigote y el arranque typeahead para el elemento de representación

Question

Me gustaría personalizar el elemento que se representa mediante bootstrap-typeahead utilizando la plantilla de manillares. Al mirar el código, parece que el elemento predeterminado es <li><a href="#"></a></li>.

Supongamos que me gustaría usar una plantilla de barras para renderizar mi artículo.

Creo que debería redefinir la función de renderizado de esta forma (1).

Mi pregunta es:
¿cómo se debe usar el (1) con bootstrap-typeahead.js v2.1.0`?

Aquí está (2) el código sobre las opciones que estoy pasando a $.fn.typeahead y (3) mi plantilla de manillar/bigote.

---

(1)

var renderItem = function (ul, user) { 
    // user is the Backbone.Model 
    return $('<li></li>') 
     .data('item.autocomplete', user) 
     .append(autocompleteItemTemplate(user.toJSON())) 
     .appendTo(ul); 
}; 

---

(2)

element.typeahead({ 
    minLength: 3, 
    source: function() { 
     var users = app.userCollection; 

     users = _.map(users, function (user) { 
      return user.get('first_name') + ' ' + user.get('last_name'); 
     }); 
     return users; 
    } 
}); 

---

(3)

<a>{{ first_name }} {{ last_name}}</a> 

Answer 1

Puede sobrescribir el método render así:

element.data("typeahead").render = function (items) { 
    var that = this; 

    that.$menu.empty(); 
    items = $(items).map(function (i, item) { 
     i = renderItem(that.$menu, item).attr("data-value", item); 
     i.find("a").html(that.highlighter(item)); 
     return i[0]; 
    }); 

    items.first().addClass("active"); 
    return this; 
}; 

Sin embargo, puesto que la propiedad fuente de TYPEAHEAD debe ser siempre una matriz de cadenas o una función que devuelve una matriz de cadenas, en el renderItem funciona el argumento de usuario se ser cuerda, así que creo que no podrás usar los manubrios.