Discussion :

[jfsenechal]

Hello

J'essaie d'intégrer http://blueimp.github.io/jQuery-File...asic-plus.html basic plus ui
Je dois intégrer dans ma page le code suivant https://github.com/mylen/jquery-file...load.html.twig
Le soucis c'est que twig parse ce fichier et affiche ainsi :

Comme on le voit le code est mal interprété
J'inclus mon template de cette manière {% include "CfSepultureBundle:Image:template-upload.html.twig" %}

J'ai essayé des raw, escape et autres mais rien n'y fait

J'ai regardé le code du bundle jquery-file-upload-bundle
mais je trouve rien de plus que ce que moi je fais



Mon code javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<script type="text/javascript">
 
$(function() {
    'use strict';
 
    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: "{{ oneup_uploader_endpoint('gallery') }}",
        dataType: 'json',
        type: 'POST'
    });
 
    // Enable iframe cross-domain access via redirect option:
    $('#fileupload').fileupload(
            'option',
            'redirect',
            window.location.href.replace(
                    /\/[^\/]*$/,
                    '/cors/result.html?%s'
                    )
            );
 
    // Load existing files:
    $('#fileupload').addClass('fileupload-processing');
    $.ajax({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: $('#fileupload').fileupload('option', 'url'),
        dataType: 'json',
        context: $('#fileupload')[0]
    }).always(function() {
        $(this).removeClass('fileupload-processing');
    }).done(function(result) {
        $(this).fileupload('option', 'done')
                .call(this, $.Event('done'), {result: result});
    });
});
 
</script>

[gototog]

au risque de répondre a coté, pourquoi tu remplaces pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
(% for (var i=0, file; file=o.files[i]; i++) { %)
<tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="name"><span>(%=file.name%)</span></td>

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
{% for file in o.files %}
    {% set i = loop.index0 %}
    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="name"><span>{{ file.name }}</span></td>

etc..

[jfsenechal]

Les { ont été remplacés volontairement par des ( sinon, twig plante complètement

Unexpected character ";" in /var/www/proj/src/Cf/SepultureBundle/Resources/views/Image/template-upload.html.twig at line 3

C'est l'astuce faite par le bundle jquery-file-upload-bundle, mais je comprends pas à quel moment c'est signalé que les { sont devenus des (

[jfsenechal]

En faite ce qu'il se passe ici c'est qu'il s'agit d'un template javascript
qui est interprété par https://github.com/blueimp/JavaScrip...ter/js/tmpl.js

Ici dans le projet https://github.com/mylen/jquery-file-upload-bundle
il a modifié la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
tmpl.regexp = /([\s'\\])(?!(?:[^{]|\{(?!%))*%\})|(?:\{%(=|#)([\s\S]+?)%\})|(\{%)|(%\})/g;

Mais comme il s'agit d'une vieille version du template javascript, je n'ai plus les mêles critères de regexp
Je saurais jamais modifier cette règle

Je pense que je devrai utiliser un autre template engine https://github.com/blueimp/jQuery-Fi...emplate-Engine

Sauf si quelqu'un sait comment utiliser un template javascript sans conflit avec twig

[jfsenechal]

Bon ben au final suffisait de metre le raw...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
{% raw %}
<script id="template-download" type="text/x-tmpl">