I am using twig and handlebar.js with symfony2. I am making handlebar templates in twig file using tag.
But the problem is both use {{ }} curly braces. So the values used for handlebars are mixed with twig. So on page load exception appears.
Is there any way to use both at the same time.
Thank you in advance.
Regards
Use the verbatim tag.
{% verbatim %}
<ul>
{{#items}}
<li>{{name}}
{{/items}}
</ul>
{% endverbatim %}
Related
I'm trying to follow the atomic design pattern with twig.
When rendering a simple atom, I need to do something like:
{% include '#MyBundle/Resources/views/atoms/button/button.html.twig' with { href: '/section1', text: 'Example text' } only %}
This approach starts getting messy when the atom or component has more variables, or the directory structure is a bit more complex.
I'd be awesome to be able to do something like:
{% button('/section1','Example text') %}
I know that this can be achieved with a twig function, but I'm worried this pattern can get tricky with a larger code base.
Any experience around this? Cheers!
You can use macro structure. Read documentation: http://twig.sensiolabs.org/doc/tags/macro.html
{% macro button(href, text) %}
{% here you can place your template %}
{% endmacro %}
Then you will need only import your twig file with macro once. After that you can use construction like {% button('/section1','Example text') %}.
In my twig view files for a Symfony application I need to write a log {% trans %}Foo Bar Baz{% endtrans %} what is quite annoying.
Therefore I tried to make a template, where I just have to write trans press space and the magic is done.
I made a new Template in Twig File, Twig Block and Twig Variable but non of them worked. The Code I used was:
{% trans %}${TEXT}{% endtrans %}
Abbreviation is trans
Then I restarted NetBeans, but unfortunately nothing happens when I write trans in a .twig file.
What am I doing wrong? How do I have to do this?
Thanks (:
You should add your Code Template in the Twig Block language, not Twig File language.
You don't need to reboot netbeans.
Then, type relatively quickly: {% trenter
You'll come up with:
If you don't want to type {% at all, you can choose HTML language instead of Twig Block language (assuming your file name ends with .html.twig).
I have problem with included files. In my layout.html.twig I have scripts.js at the end body section before {% block script %}{% endblock %}. When file extending layout and use script block, its ok, but when use this block and include file whose use the same block, then is problem. Rendered page has all javascripts, but in different places.
For example:
page.html.twig
...
There is page.html.twig
{% include 'file.html.twig' with {'something': 'something'} %}
After include file.html.twig
..
{% block script %}
<script src="file1.js"></script>
{% endblock %}
file.html.twig
There is file.html.twig
{% block script %}
<script src="file2.js"></script>
{% endblock %}
Then rendered page look like this:
There is page.html.twig
There is file.html.twig
<script src="file2.js"></script>
After include file.html.twig
<script src="file1.js"></script>
I want have all javascript files in one place, one by one.
I think you should try to 'embed' instead of 'include'.
http://twig.sensiolabs.org/doc/tags/embed.html
With embedded, you can choose blocks to include.
Ps : If you override a block, you can get the parent block content in using parent() :
{% block script %}
{{ parent() }}
{% endblock script %}
The {% block %} tag and the inheritance system work only with layouts and {% extends %}. It is not meant to be used with includes, so the script block in your included file.html.twig does not merge with page.html.twig.
One solution would be to set a an argument to you included file.
file.html.twig
{% if get == 'content' %}
There is file.html.twig
{% endif %}
{% if get == 'script' %}
<script src="file2.js"></script>
{% endif %}
page.html.twig
...
There is page.html.twig
{% include 'file.html.twig' with {'something': 'something', 'get': 'content'} %}
After include file.html.twig
..
{% block script %}
<script src="file1.js"></script>
{% include 'file.html.twig' with {'something': 'something', 'get': 'script'} %}
{% endblock %}
You will need to conform to a standard practice when dealing with included templates and inheritance (you can invent your own standard).
Try to compartmentalize your includes, I usually have a directory called 'partials' for includes, and 'fragments' for renders. Each one belonging to a single collection of controller views.
One way I dealt with a similar problem to what you are having was to use a base template which covered the requirements of a specific set of views, each view template would extend it. It may be somewhat wasteful to include the javascripts and stylesheets for the entire collection of views for a specific controller, but it is a) more efficient that including all assets everywhere and, b) I manage the view specific assets under a single base template.
So long as the views have a dependency on that base template the structure wouldn't break.
Think of Twig templates as PHP classes (they compile to classes anyway). A class can inherit from one chain of parents. What you are trying to do is treat two sub-classes as a single child of a super class, overriding the same method at the same time. Simply can't be done. An include is closer to a child property, with is own rules and properties. The included template is less dependent on the includer than vice-versa, so it is impossible for it to inherit from it conventionally.
Hi everyone and sorry for my english,
I have a service who generates some html code which is passed to a twig template. I had to use the raw filter to show the code, but in that code I call a twig function.
This is the code stored in a var which is passed to the template by the controller.
'<li class="active" >Help</li>'
The resulting html code is the same, so {{ path('help') }} is not called.
Is there any filter to show the html code and call the functions?
Thanks
In your code, you are using {{path('help')}} for the hyperlink. Instead of using the twig path function, include the original Url in the code that is sent from the service. In the service. use
'<li class="active" >Help</li>'
I answered this before here: Twig: prevent parsing of client-side templates
{% raw %} deprecated
{% verbatim %}
<ul>
{% for item in seq %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% endverbatim %}
You should render your variable using the {% include(template_from_string(your_var)) %} twig block.
See the answer of Render content from string/database and generate links with twig for more info.
I'd like to pass the output of an included Twig template to another included Twig template as a parameter, like so:
{% include 'MyBundle:Default:tpl1.html.twig' with {'item': include 'MyBundle:Default:tpl2.html.twig'} %}
Unfortunately, this does not work as the syntax is invalid.
Any ideas how to nest templates like this / store the output of an included template in a variable?
Or is there an alternative way to accomplish what I want to do? I thought about defining blocks in the included template, but it does not seem to be possible to overwrite them from the "outer" template ...
Try settings the template's content in a variable:
{% set content %}
{% include 'foo' %}
{% endset %}
{% include 'bar' with {'item': content } %}
It should work.