[英]How to integrate javascript to .volt template engine of phalcon php
我需要使用http://blueimp.github.io/jQuery-File-Upload/在我的项目,该项目使用的框架PhalconPHP
为此,我的.volt文件需要包含这样的javascript代码
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %} //The problem begin here
<tr class="template-upload fade">
<td>
<span class="preview"></span>
........//Some similar code here
</td>
</tr>
{% } %}
</script>
但是问题是{%和%}是.volt模板语法。 当我像这样使用{% for (var i=0, file; file=o.files[i]; i++) { %}
,.volt语法和javascript语法是冲突的。 浏览器(例如Chrome或Firefox)将显示错误:“语法错误,意外的令牌(在/ var / www / ....在第77行中”),其中77是该行以{%开头
在.phtml中,它可以正常工作,但我不想使用.phtml重建我的整个视图模板。如何在.volt中使用此代码? javascript是否有其他语法与{%和%}不同? 谢谢!
您可以:
"{%", "%}", "{{", "}}"
): <script id="template-upload" type="text/x-tmpl">
{{ '{%' }} for (var i=0, file; file=o.files[i]; i++) { {{ '%}' }}
(3)有点混乱,但应该可以使用。
@jodator有一个很好的方法。
或者,您可以在Volt模板中使用PHP
<script id="template-upload" type="text/x-tmpl">
<?php foreach (.....) { ?>
<tr class="template-upload fade">
<td>
<span class="preview"></span>
........//Some similar code here
</td>
</tr>
<?php } ?>
</script>
这里唯一的问题是,您必须注意变量的范围,以便PHP可以处理它们。 例如,如果o.files
是一个javascript对象,则需要将其作为变量传递给PHP。 如果它是一个PHP对象,则只需将其更改为$o.files
您可以根据Javascript模板文档更改模板正则表达式:
要将不同的标记用于模板语法,请通过修改所有出现的“ {%”和“%}”(例如与“ [%”和“%]”)来使用修改后的正则表达式覆盖tmpl.regexp:
tmpl.regexp = /([\s'\\])(?!(?:[^[]|\[(?!%))*%\])|(?:\[%(=|#)([\s\S]+?)%\])|(\[%)|(%\])/g;
查看自述文件: https : //github.com/blueimp/JavaScript-Templates#template-parsing
尝试将以下代码用于jquery文件上传插件:
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{{ '{%' }} for (var i=0, file; file=o.files[i]; i++) { {{ '%}' }}
<tr class="template-upload fade">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{{ "{%=" }} file.name {{ "%}" }}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
</td>
<td>
{{ "{%" }} if (!i && !o.options.autoUpload) { {{ "%}" }}
<button class="btn btn-primary start" disabled>
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
{{ "{%" }} } {{ "%}" }}
{{ "{%" }} if (!i) { {{ "%}" }}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{{ "{%" }} } {{ "%}" }}
</td>
</tr>
{{ '{%' }} } {{ '%}' }}
</script>
<script id="template-download" type="text/x-tmpl">
{{ "{%" }} for (var i=0, file; file=o.files[i]; i++) { {{ "%}" }}
<tr class="template-download fade">
<td>
<span class="preview">
{{ "{%" }} if (file.thumbnailUrl) { {{ "%}" }}
<a href="{{'{%'}}=file.url{{'%}'}}" title="{{'{%'}}=file.name{{'%}'}}" download="{{'{%'}}=file.name{{'%}'}}" data-gallery><img src="{{'{%'}}=file.thumbnailUrl{{'%}'}}"></a>
{{ "{%" }} } {{ "%}" }}
</span>
</td>
<td>
<p class="name">
{{ "{%" }} if (file.url) { {{ "%}"}}
<a href="{{'{%='}}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><span class="label label-danger">Error</span> {{"{%="}}file.error{{"%}"}}</div>
{{ " {%"}} } {{ "%}"}}
</td>
<td>
<span class="size">{{ "{%="}}o.formatFileSize(file.size){{ "%}"}}</span>
</td>
<td>
{{ "{% if (file.deleteUrl) { %}"}}
<button class="btn btn-danger delete" data-type="{{'{%='}}file.deleteType{{'%}'}}" data-url="{{'{%='}}file.deleteUrl{{'%}'}}" {{"{%"}} if (file.deleteWithCredentials) { {{ "%}" }} data-xhr-fields='{"withCredentials":true}' {{ "{%"}} } {{"%}" }}>
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
{{ "{% } else { %}"}}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{{ "{% } %}"}}
</td>
</tr>
{{ "{% } %}"}}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.