Cannot understand how to use alt template engine in typeahead 0.10.1

Question

I know I can use handlebars to mock up a custom template style using typeahead.

$('#ItemLookup2').typeahead(null, {
    displayKey: 'description',
    source: values.ttAdapter(),
    templates: {
    suggestion: Handlebars.compile([
             '<p class="repo-language">{{Barcode}}</p>',
            '<p class="repo-name">{{sellPrice}}</p>',
            '<p class="repo-description">{{description}}</p>'
        ].join(''))
    }
});

That works fine.

But how about if I want to use Mustache.render or Hogan.compile?

$('#ItemLookup2').typeahead(null, {
    displayKey: 'description',
    source: values.ttAdapter(),
    templates: {
        suggestion: Hogan.compile([
             '<p class="repo-language">{{Barcode}}</p>',
            '<p class="repo-name">{{sellPrice}}</p>',
            '<p class="repo-description">{{description}}</p>'
        ].join(''))
    }
});

Throws an exception TypeError: that.templates.suggestion is not a function.

I've also tried

   var Suggestion = Mustache.render('<p class="repo-language">{{Barcode}}</p>');
$('#ItemLookup2a').typeahead(null, {
    displayKey: 'description',
    source: values.ttAdapter(),
    templates: {
            suggestion:Suggestion.join('')
    }
});

but get TypeError: Suggestion.join is not a function

Could someone please give me some pointers?

Thanks,

Carl

Answer 1

this works for me.

var templ =  Hogan.compile([
         '<p class="repo-language">{{Barcode}}</p>',
        '<p class="repo-name">{{sellPrice}}</p>',
        '<p class="repo-description">{{description}}</p>'
    ].join(''));

$('#ItemLookup2').typeahead(null, {
  displayKey: 'description',
  source: values.ttAdapter(),
  templates: {
    suggestion: function (data) { return templ.render(data); }
  }
});

check the source code how typeahead 10 call the template function. I just take the getFooterHtml snippet, getSuggestionsHtml works almost the same, but pass the different data and do some extra jobs.

            function getFooterHtml() {
                return that.templates.footer({
                    query: query,
                    isEmpty: !hasSuggestions
                });
            }

we should call render function explicitly to render for Hogan/Mustache. Hogan.compile('sample {{data}}').render({"data": 'hey'}); but, Handlebars can works like this. Handlebars.compile('sample {{data}}')({"data": 'hey'});

so, snippet 1 of questions by Handlerbars can works, but Hogan/Mustache should do some wrapper jobs.