javascript - Migrating to Typeahead 0.10+ with Hogan - Stack Overflow

admin管理员组

文章数量:1026216

I have been using Typeahead 0.9.3 with Hogan 2 for a while and it was very straight forward to setup.

in 0.9.3 I did something like:

$('input.search-query').typeahead([
     {
         name:     "pages"
        ,local:    localSuggestions
        ,template: '<div class="tt-suggest-page">{{value}}</div>'
        ,engine:   Hogan
    }
]);

According to the Migration Guide to 0.10 "Prepiled Templates are Now Required", so in 0.10.3 I'm trying:

$('input.search-query').typeahead(null, {
     name:     "pages"
    ,source:   taSourceLocal.ttAdapter()
    ,templates: {
         suggestion: Hoganpile('<div class="tt-suggest-page">{{value}}</div>')
     }
});

but it does not work. I get an error: Uncaught TypeError: object is not a function

If there is another, minimalist template engine that can work I will consider it as well, but it has to be small. I don't want to add a huge file like Handlebars or a whole library like Underscore.

any ideas? TIA!

I have been using Typeahead 0.9.3 with Hogan 2 for a while and it was very straight forward to setup.

in 0.9.3 I did something like:

$('input.search-query').typeahead([
     {
         name:     "pages"
        ,local:    localSuggestions
        ,template: '<div class="tt-suggest-page">{{value}}</div>'
        ,engine:   Hogan
    }
]);

According to the Migration Guide to 0.10 "Prepiled Templates are Now Required", so in 0.10.3 I'm trying:

$('input.search-query').typeahead(null, {
     name:     "pages"
    ,source:   taSourceLocal.ttAdapter()
    ,templates: {
         suggestion: Hogan.pile('<div class="tt-suggest-page">{{value}}</div>')
     }
});

but it does not work. I get an error: Uncaught TypeError: object is not a function

If there is another, minimalist template engine that can work I will consider it as well, but it has to be small. I don't want to add a huge file like Handlebars or a whole library like Underscore.

any ideas? TIA!

• javascript
• template-engine
• typeahead.js
• hogan.js
• twitter-typeahead

Share Improve this question Follow edited Jul 13, 2014 at 23:25 isapir asked Jul 13, 2014 at 22:38 isapirisapir 23.8k1616 gold badges125125 silver badges121121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

As stated by Jake Harding, the solution for modern browsers is like so:

var piledTemplate = Hogan.pile('<div class="tt-suggest-page">{{value}}</div>');

$('input.search-query').typeahead(null, {
    // ...
    templates: {
        suggestion: piledTemplate.render.bind(piledTemplate);
    }
});

Unfortunately, Function.prototype.bind() is not supported by IE < 9, so if you need to support older browsers that will not work.

The good news is that as stated by Steve Pavarno you don't need a template engine anymore. You can achieve the desired result by passing a function like so:

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

I have been using Typeahead 0.9.3 with Hogan 2 for a while and it was very straight forward to setup.

in 0.9.3 I did something like:

$('input.search-query').typeahead([
     {
         name:     "pages"
        ,local:    localSuggestions
        ,template: '<div class="tt-suggest-page">{{value}}</div>'
        ,engine:   Hogan
    }
]);

According to the Migration Guide to 0.10 "Prepiled Templates are Now Required", so in 0.10.3 I'm trying:

$('input.search-query').typeahead(null, {
     name:     "pages"
    ,source:   taSourceLocal.ttAdapter()
    ,templates: {
         suggestion: Hoganpile('<div class="tt-suggest-page">{{value}}</div>')
     }
});

but it does not work. I get an error: Uncaught TypeError: object is not a function

If there is another, minimalist template engine that can work I will consider it as well, but it has to be small. I don't want to add a huge file like Handlebars or a whole library like Underscore.

any ideas? TIA!

I have been using Typeahead 0.9.3 with Hogan 2 for a while and it was very straight forward to setup.

in 0.9.3 I did something like:

$('input.search-query').typeahead([
     {
         name:     "pages"
        ,local:    localSuggestions
        ,template: '<div class="tt-suggest-page">{{value}}</div>'
        ,engine:   Hogan
    }
]);

According to the Migration Guide to 0.10 "Prepiled Templates are Now Required", so in 0.10.3 I'm trying:

$('input.search-query').typeahead(null, {
     name:     "pages"
    ,source:   taSourceLocal.ttAdapter()
    ,templates: {
         suggestion: Hogan.pile('<div class="tt-suggest-page">{{value}}</div>')
     }
});

but it does not work. I get an error: Uncaught TypeError: object is not a function

If there is another, minimalist template engine that can work I will consider it as well, but it has to be small. I don't want to add a huge file like Handlebars or a whole library like Underscore.

any ideas? TIA!

• javascript
• template-engine
• typeahead.js
• hogan.js
• twitter-typeahead

Share Improve this question Follow edited Jul 13, 2014 at 23:25 isapir asked Jul 13, 2014 at 22:38 isapirisapir 23.8k1616 gold badges125125 silver badges121121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

As stated by Jake Harding, the solution for modern browsers is like so:

var piledTemplate = Hogan.pile('<div class="tt-suggest-page">{{value}}</div>');

$('input.search-query').typeahead(null, {
    // ...
    templates: {
        suggestion: piledTemplate.render.bind(piledTemplate);
    }
});

Unfortunately, Function.prototype.bind() is not supported by IE < 9, so if you need to support older browsers that will not work.

The good news is that as stated by Steve Pavarno you don't need a template engine anymore. You can achieve the desired result by passing a function like so:

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

本文标签： javascriptMigrating to Typeahead 010 with HoganStack Overflow