x-tmpl은 무엇입니까?


86

인터넷에서 답을 찾고 있었지만 아무것도 찾을 수 없었습니다. 이 작은 코드 간식은 내가 이해할 수 없기 때문에 정말로 나를 좌절시킵니다. (이것은 플러그인의 일부입니다 : jQuery 파일 업로드)

<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입니까?
  • 이것들 {%%}태그 는 무엇입니까 ?
  • 이 코드를 실행하는 파서는 무엇입니까?
  • ...

...하지만 이것에 대한 모든 것을 알고 싶습니다.


내가 파일로 장소를 보낼처럼 이봐 당신은 당신이 업로드 데이터를 전송 어떻게했는지 말해 것
NullPoiиteя

@Mayankswami : 당신이 내게 물어 보려는 것을 얻지 못합니다.
Dyin

나는 당신이 jquery 파일 업로드를 사용했다고 생각합니다. 파일과 함께 양식 데이터를 보내는 방법을 알고 싶습니다.
NullPoiиteя

@Mayankswami :이 사이트에서 질문을 검색해야한다고 생각합니다. 찾고있는 내용을 찾지 못하면 질문을 만드십시오.
죽을

A는 당신에게 선생님 aksed 있도록이 같은 코드 나는 JQuery와 파일 업 로더에 톱이
NullPoiиteя

답변:


63

x-tmpl은 실제 의미가 없으며 브라우저가 스크립트를 자바 스크립트로 해석하지 못하도록합니다.

주로 jquery 템플릿 또는 knockoutjs 템플릿 바인딩 과 함께 사용됩니다 .

어떤 시점에서 javascript 데이터 객체는 템플릿과 함께 사용되어 일부 html을 렌더링합니다. 데이터 개체의 값은 템플릿에서 {%} 및 유사한 것으로 표시된 값을 루프 등의 코드 흐름을 반영하는 일부 {%} 섹션으로 대체합니다.

어떤 템플릿 라이브러리가 {%}를 사용하는지 잘 모르겠지만 jquery 템플릿, jsrender 또는 녹아웃이 아닙니다. 샘플 코드에서 어떤 라이브러리가 참조되는지 확인해야합니다.


25
여기 JavaScript Templates 에서 찾았습니다 . 스크립트는이 사이트에서 참조되었습니다. 이제 모든 것이 의미가 있습니다. 당신의 brefing에 감사드립니다!
Dyin

1
x-tmpl로 HTML을 렌더링 할 때 jQuery가 작동하지 않았습니다. 예를 들어 x-tmpl 내부에서 렌더링하는 확인란이 있습니다. <label class = "modifiericon btn"> <input type = "checkbox"id = 'seo'> SEO </ label>. html 파일에 추가 된 스크립트입니다. 예 : <script type = "text / javascript"> $ ( '# seo'). change (function () {if ($ (this) .is ( ': checked')) {alert ( 'hi');} else {alert ( 'hello');}} </ script>
502_Geek

11

그렇다면 text / x-tmpl은 어떤 유형입니까?

비표준. 그래도 템플릿처럼 보입니다.

이 {% 및 %} 태그는 무엇입니까?

템플릿 언어의 일부입니다.

이 코드를 실행하는 파서는 무엇입니까?

아마도 하나는 JavaScript로 작성되었고 <script>동일한 페이지의 다른 요소에서 가져 왔을 것입니다 .



-4

위의 코드는 https://github.com/sigurdga/django-jquery-file-upload에있는 Django Jquery 파일 업로드 프로젝트를 참조합니다.

{% %}는 Django 템플릿 태그입니다. 자세한 내용은 https://docs.djangoproject.com/en/dev/ref/templates/를 방문 하십시오.

이 태그는 django 템플릿 시스템에 의해 파싱됩니다.


2
이것에 대해 더 많은 조사를 해보니 내 대답이 틀렸다는 것을 알았습니다. 이 경우 태그는이 자바 스크립트 라이브러리 github.com/sigurdga/django-jquery-file-upload/blob/master/… 에서 AJAX 작업 결과에 따라 실시간으로 HTML 콘텐츠를 렌더링하는 방법 으로 사용되었습니다 .
czager

7
: 태그 세바스찬 Tschan하여 자바 스크립트 템플릿 태그 장고 템플릿 태그 아니지만, blueimp.github.com/JavaScript-Templates
리카르도 카르 모
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.