How To Integrate Javascript To .volt Template Engine Of Phalcon Php

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

Solution 1:

@jodator has a good approach.

Alternatively you can use PHP in your Volt template

<scriptid="template-upload"type="text/x-tmpl"><?phpforeach (.....) { ?><trclass="template-upload fade"><td><spanclass="preview"></span>
       ........//Some similar code here
   </td></tr><?php } ?></script>

The only issue here is that you have to be careful on what the scope of your variables are so that PHP can process them. For instance if o.files is a javascript object then you need to pass it as a variable in PHP. If it is a PHP object then all you will have to do is change it to $o.files

Solution 2:

You can:

1. Change javascript template syntax which this plugin uses.
2. Use different templates in jQuery File Upload
3. Echo strings which causes problems with volt ( "{%", "%}", "{{", "}}" ) :

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

(3) is kinda messy but should work.

Solution 3:

You could change the template regex, per the Javascript Templates documentation:

To use different tags for the template syntax, override tmpl.regexp with a modified regular expression, by exchanging all occurrences of "{%" and "%}", e.g. with "[%" and "%]":

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

Check out the readme: https://github.com/blueimp/JavaScript-Templates#template-parsing

Solution 4:

Try this code for jquery file upload plugin:

<!-- The template to display files available for upload --><scriptid="template-upload"type="text/x-tmpl">
{{ '{%' }} for (var i=0, file; file=o.files[i]; i++) { {{ '%}' }}
<tr class="template-upload fade">
    <td><spanclass="preview"></span></td><td><pclass="name">{{ "{%=" }} file.name {{ "%}" }}</p><strongclass="error text-danger"></strong></td><td><pclass="size">Processing...</p><divclass="progress progress-striped active"role="progressbar"aria-valuemin="0"aria-valuemax="100"aria-valuenow="0"><divclass="progress-bar progress-bar-success"style="width:0%;"></div></div></td><td>
                {{ "{%" }} if (!i && !o.options.autoUpload) { {{ "%}" }}
            <buttonclass="btn btn-primary start"disabled><iclass="glyphicon glyphicon-upload"></i><span>Start</span></button>
        {{ "{%" }} } {{ "%}" }}
    {{ "{%" }} if (!i) { {{ "%}" }}
            <buttonclass="btn btn-warning cancel"><iclass="glyphicon glyphicon-ban-circle"></i><span>Cancel</span></button>
    {{ "{%" }}  }  {{ "%}" }}
    </td>
</tr>
{{ '{%' }} } {{ '%}' }}
</script><scriptid="template-download"type="text/x-tmpl">
{{ "{%" }} for (var i=0, file; file=o.files[i]; i++) {  {{ "%}" }}
<tr class="template-download fade">
    <td><spanclass="preview">
                    {{ "{%" }} if (file.thumbnailUrl) { {{ "%}" }}
                <ahref="{{'{%'}}=file.url{{'%}'}}"title="{{'{%'}}=file.name{{'%}'}}"download="{{'{%'}}=file.name{{'%}'}}"data-gallery><imgsrc="{{'{%'}}=file.thumbnailUrl{{'%}'}}"></a>
        {{ "{%" }} } {{ "%}" }}
        </span></td><td><pclass="name">
            {{ "{%" }} if (file.url) { {{ "%}"}}
                <ahref="{{'{%='}}file.url{{'%}'}}"title="{{'{%='}}file.name{{'%}'}}"download="{{'{%='}}file.name{{'%}'}}" {{'{%='}}file.thumbnailUrl?'data-gallery':'' {{'%}'}}>{{'{%='}}file.name{{'%}'}}</a>
            {{ "{%"}} } else { {{ "%}"}}
                <span>{{ "{%="}}file.name{{ "%}"}}</span>
            {{ "{%"}} } {{ "%}"}}
        </p>
        {{ "{%"}} if (file.error) { {{ "%}"}}
            <div><spanclass="label label-danger">Error</span> {{"{%="}}file.error{{"%}"}}</div>
       {{ " {%"}} } {{ "%}"}}
    </td><td><spanclass="size">{{ "{%="}}o.formatFileSize(file.size){{ "%}"}}</span></td><td>
        {{ "{% if (file.deleteUrl) { %}"}}
            <buttonclass="btn btn-danger delete"data-type="{{'{%='}}file.deleteType{{'%}'}}"data-url="{{'{%='}}file.deleteUrl{{'%}'}}" {{"{%"}} if (file.deleteWithCredentials) { {{ "%}" }} data-xhr-fields='{"withCredentials":true}' {{ "{%"}} } {{"%}" }}><iclass="glyphicon glyphicon-trash"></i><span>Delete</span></button><inputtype="checkbox"name="delete"value="1"class="toggle">
        {{ "{% } else { %}"}}
            <buttonclass="btn btn-warning cancel"><iclass="glyphicon glyphicon-ban-circle"></i><span>Cancel</span></button>
        {{ "{% } %}"}}
    </td></tr>
{{ "{% } %}"}}
</script>