什么是 x-tmpl?

正在网上寻找答案,但什么也没找到。这个代码的小零食真的让我很沮丧,因为我不能理解它。(这是名为 jQuery File Upload 的插件的一部分)

<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
{% if (file.error) { %}
<td></td>
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
{% } else { %}
<td class="preview">{% if (file.thumbnail_url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
{% } %}</td>
<td class="name">
<a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
</td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td colspan="2"></td>
{% } %}
<td class="delete">
<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
<i class="icon-trash icon-white"></i>
<span>{%=locale.fileupload.destroy%}</span>
</button>
<input type="checkbox" name="delete" value="1">
</td>
</tr>
{% } %}
</script>
  • 那么 text/x-tmpl是什么类型的呢?
  • 这些 {%%}标签是什么?
  • 哪个解析器执行这段代码?
  • ...

但是想知道关于这件事的一切。

45949 次浏览

So, what type is text/x-tmpl?

A non-standard one. Looks like a template though.

What are these {% and %} tags?

Part of the template language.

What parser executes this code?

Probably one written in JavaScript and imported in another <script> element on the same page.

x-tmpl has no real meaning, it simply stops the browser from interpreting the script as javascript.

It's mostly used with jquery templates or knockoutjs template binding.

At some point, a javascript data object will be used in conjunction with the template to render some html. The values in the data object will replace those marked with {%} and similar in the template, with some {%} sections reflecting code flow such as loops etc.

I'm not sure which templating library uses {%} however, it's not jquery templates, jsrender or knockout. You'd have to check what libraries are being referenced in the sample code.

The code above references the project Django Jquery File Upload found here https://github.com/sigurdga/django-jquery-file-upload

The {% %} are Django template tags. For more information visit https://docs.djangoproject.com/en/dev/ref/templates/

These tags will be parsed by the django templating system

jQuery-File-Upload has a dependency on JavaScript-Templates which uses the nonstandard text/x-tmpl mime type