如何将javascript集成到phalcon php的.volt模板引擎

Question

我需要在使用 PhalconPHP 框架的项目中使用http://blueimp.github.io/jQuery-File-Upload/

为此，我的 .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>

但问题是 {% and %} 是 .volt 模板语法。当我像这样使用{% for (var i=0, file; file=o.files[i]; i++) { %} 时，.volt 语法和 javascript 语法是冲突的。 Chrome 或 Firefox 等浏览器将显示错误：“语法错误，意外令牌（在 /var/www/.... 第 77 行”，其中 77 是该行以 {%

开头

在 .phtml 中它工作正常，但我不想用 .phtml 重建我的整个视图模板 如何将此代码与 .volt 一起使用？ javascript 还有其他语法与 {% 和 %} 不同吗？ 谢谢！

Answer 1

你可以：

1. Change javascript template syntax 这个插件使用的。
2. Use different templates 在 jQuery 文件上传中
3. 导致电压问题的回声字符串 ("{%", "%}", "{{", "}}")：

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

(3) 有点乱，但应该可以。

Answer 2

@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

Answer 3

试试这个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>

Answer 4

您可以根据 Javascript 模板文档更改模板正则表达式：

要为模板语法使用不同的标签，用修改过的正则表达式覆盖 tmpl.regexp，通过交换所有出现的“{%”和“%}”，例如用“[%”和“%]”：

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

查看自述文件： https://github.com/blueimp/JavaScript-Templates#template-parsing