How to integrate javascript to .volt template engine

[piavgh]

I need to use http://blueimp.github.io/jQuery-File-Upload/ in my project which use framework PhalconPHP

In order to do so, my .volt file need to contain a javascript code like this

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %} //The problem begin here, with javascript code
 <tr class="template-upload fade">
  <td>
  <span class="preview"></span>
    ........//Some similar code here
  </td>
 </tr>
{% } %} //problem here too
</script>

But the problem is {% and %} is .volt template syntax. When I use {% for (var i=0, file; file=o.files[i]; i++) { %} like that, the .volt syntax and javascript syntax are conflict. Browser such as Chrome or Firefox will show the error : "Syntax error, unexpected token ( in /var/www/.... on line 77" where 77 is that line start with {%

In .phtml it works fine, but I don't want to rebuild my whole view template with .phtml How can I use this code with .volt? Is there other syntax for javascript which is different from {% and %} ? If not, I think this should be a necessary feature. Thank you!

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[mruz]

Please look at Volt: Template Engine and do you really need php and volt For loop for this?

<ul>
{% for robot in robots %}
    <li>{{ robot['name'] }}</li>
{% endfor %}
</ul>

is just converting to:

<ul>
<?php foreach ($robots as $robot) { ?>
    <li><?php echo $robot['name']; ?></li>
<?php } ?>
</ul>

So, is it your volt syntax right?

{% for (var i=0, file; file=o.files[i]; i++) { %}
...
{% } %}

[jodator]

@mruz I think that problem is in escaping Vot's delimiters in volt template.

I think that all the code inside <script> tag is for JavaScript template engine and should not be interpreted by Volt (or manually escaped by developer to be exact).

Answer to the same question on StackOverflow

[maxgalbu]

@jodator it can't be that way. You might need to input an array into javascript like this:

<script type="text/javascript">
var array = {{ phparray | json_encode }};
</script>

Twig solves this by using the {% verbatim %} tag, see here for the discussion about it for volt: https://github.com/phalcon/cphalcon/issues/1253

[jodator]

@maxgalbu Maybe I clearify my previous posts: I still think that anything inside <script> tag is a HTML/JavaScript code for a JavaScript template engine used by jquery-upload-plugin not a PHP (server side). It should be escaped on server side. It's not a problem with passing PHP array to the HTML but with escaping Volt's delimiters.

This feature is missing in current Volt implementation and I agree that #1253 could solve this:

<script id="template-upload" type="text/x-tmpl">
{% literal %}
{% for (var i=0, file; file=o.files[i]; i++) { %}
// the rest of JS/HTML
{% endliteral %}
</script>

[romanlex]

How I can fix this trouble( I have js template( Maybe I can include file to volt template without parse?

[bogutski]

{{ "{{#each sales}}" }} ...

[dschissler]

I think that what you are asking for is the ability to escape Volt control characters.

[dschissler]

Related to #9966. Volt needs better escaping options.

[sergeyklay]

https://github.com/phalcon/cphalcon/issues/1253