Search code examples
symfonytwigbootstrap-typeahead

Use Typeahead template inside a twig


I'm using symfony2 and want to use typeahead, I'm including configuration inside the twig and so I can't render the template because this syntax : {{ var }} is the same as Twig's. How can I work this out ?

This is the code for typeahead :

$('.example-twitter-oss .typeahead').typeahead({
  name: 'twitter-oss',
  prefetch: '../data/repos.json',
  template: [
    '<p class="repo-language">{{language}}</p>',
    '<p class="repo-name">{{name}}</p>',
    '<p class="repo-description">{{description}}</p>'
  ].join(''),
  engine: Hogan
});

Solution

  • EDIT

    You can use the {% verbatim %} tag (as of 1.12) or {% raw %} tag (prior to 1.12) do temporary ignore Twig tokens:

    {% verbatim %}
    $('.example-twitter-oss .typeahead').typeahead({
      name: 'twitter-oss',
      prefetch: '../data/repos.json',
      template: [
        '<p class="repo-language">{{language}}</p>',
        '<p class="repo-name">{{name}}</p>',
        '<p class="repo-description">{{description}}</p>'
      ].join(''),
      engine: Hogan
    });
    {% endverbatim %}
    

    original The only solution I know of is echoing those elements with Twig:

    $('.example-twitter-oss .typeahead').typeahead({
      name: 'twitter-oss',
      prefetch: '../data/repos.json',
      template: [
        '<p class="repo-language">{{ '{{language}}' }}</p>',
        '<p class="repo-name">{{ '{{name}}' }}</p>',
        '<p class="repo-description">{{ '{{description}}' }}</p>'
      ].join(''),
      engine: Hogan
    });