Suggest for templating

[rafaelgou]

Hi,

I really liked your fork.

I read your idea for templating, and want to give you my two cents.

I wouldn't force the use of a template engine (I like Underscore.js, but I also like Twig.js).

Suggestion:

$('#my-element').typeahead({
    source: [{ id: 1, name: 'Toronto' }, { id: 2, name: 'Montreal' }, { id: 3, name: 'New York' }],
    templater: typeahead, // or underscore, or twig

});

Then the render method could call any of externals template engines (underscore, twig) or a simple internal "templater" that just uses variable replacement with a pattern or regex.

[]'s Rafael Goulart from Brazil

[tcrosen]

Hey Rafael, have you seen branch 2.0 yet? You can use any template engine you want and you don't even have to specify in the options. Check it out here.

I used Underscore initially because it is dead simple to use. Basically you pass the entire compiled object which later gets sent the data. I just have to add support for other libraries that don't make it so easy.

When you set the options like this:

$('#my-element').typeahead({
  source: [{ id: 1, name: 'Toronto' }, { id: 2, name: 'Montreal' }, { id: 3, name: 'New York' }],
  tmpl: _.template('<li id="<%= id %>"><a href="#"><%= name %></a></li>')
});

what basically happens inside the plugin is this (pseudo-code):

for each item in query results
    add tmpl(item) to list

so in the above example this is essentially the sequence of events:

var tmpl = _.template('<li id="<%= id %>"><a href="#"><%= name %></a></li>');
tmpl({ id: 1, name: 'Toronto' })
=> <li id="1"><a href="#">Toronto</a></li>

which is identical to Underscore's suggested usage:

var compiled = _.template("hello: <%= name %>");
compiled({name : 'moe'});
=> "hello: moe"

All I have to do for the other libraries is account for their various compile methods:

jQuery: jQuery.tmpl(template, data);

Hogan.js: hogan.compile(template);

etc...

[rafaelgou]

Hi, Terry!

Yes, I've seen that code. I just think it woudn't good to DEPEND of any template engine (implement a internal default method for replacement) but, if anybody wants to, let them free to use any engine they like.

Twig has almost the same call as Underscore does (instance, pass an object as parameter).

Maybe you can use jQuery.tmpl as default - as you already have this dependency!

[]'s Rafael Goulart

2012/10/4 Terry Rosen notifications@github.com

Hey Rafael, have you seen branch 2.0 yet? You can use any template engine you want and you don't even have to specify in the options. Check it out here https://github.com/tcrosen/twitter-bootstrap-typeahead/tree/2.0.

I used Underscore initially because it is dead simple to use. Basically you pass the entire compiled object which later gets sent the data. I just have to add support for other libraries that don't make it so easy.

When you set the options like this:

$('#my-element').typeahead({ source: [{ id: 1, name: 'Toronto' }, { id: 2, name: 'Montreal' }, { id: 3, name: 'New York' }], tmpl: _.template('

<%= name %>

') });

what basically happens inside the plugin is this (pseudo-code):

for each item in query results add tmpl(item) to list

so in the above example this is essentially the sequence of events:

var tmpl = _.template('

<%= name %>

'); tmpl({ id: 1, name: 'Toronto' }) =>

Toronto

which is identical to Underscore's suggested usagehttp://underscorejs.org/#template :

var compiled = _.template("hello: <%= name %>"); compiled({name : 'moe'}); => "hello: moe"

All I have to do for the other libraries is account for their various compile methods:

jQuery http://api.jquery.com/jquery.tmpl/: jQuery.tmpl(template [, data] [, options]);

Hogan.js http://twitter.github.com/hogan.js/: hogan.compile(template);

etc...

— Reply to this email directly or view it on GitHubhttps://github.com/tcrosen/twitter-bootstrap-typeahead/issues/20#issuecomment-9140898.

[ifthenelse]

Hi, nice plugin, thank you very much for the efforts you're doing to keep it up. I tried to use templating with underscore.js (by following the example above):

;$(function() {
  // People
  var name_source = [{
    id          : 102690,
    first_name        : "John",
    second_name     : "Doe",
    birthdate        : "03/07/1946",
    type        : "type1"
  },
  {
    id          : 104281,
    first_name        : "Jane",
    second_name     : "Doe",
    birthdate        : "04/09/1948",
    type        : "type2"
  },
  {
    id          : 103675,
    first_name        : "Baby",
    second_name     : "Doe",
    birthdate        : "26/11/1978",
    type        : "type3"
  }];

// Typeahead
  $('.autocomplete.name').typeahead({
    source: name_source,
    tmpl: _.template("<li id='<%= id %>' class='<%= type%>'><a href='#' title='<%= first_name %> <%= second_name %> - edit'><span class='name'><%= first_name%> <%= second_name %></span><span>Birthdate: <%= birthdate %></span></a></li>")
  });
});

But on js console I just get: Uncaught TypeError: Cannot call method 'toLowerCase' of undefined bootstrap-typeahead.js:103

I'm not sure, seems that the "display" option must be specified, but it accepts just one item attribute (e.g. "first_name") and I'd like to show multiple attributes per item based on the custom template I created.

[robj]

I have successfully been able to pass in a compiled mustache template:

$('#typeahead-search').typeahead({ minLength: 1, source: { url: '/api/typeahead', type: 'get' }, tmpl: ich.dropdown_template

this is using a compiled moustache template (in this case provided by ICanHaz.js - http://railsware.com/blog/2012/04/12/shared-mustache-templates-for-rails-3/)