x-tmpl คืออะไร?


87

กำลังหาคำตอบในเน็ต แต่ไม่พบอะไรเลย รหัสขนมเล็กน้อยนี้ทำให้ฉันหงุดหงิดอย่างที่ฉันไม่เข้าใจ (เป็นส่วนหนึ่งของปลั๊กอินที่เรียกว่า: 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อะไร?
  • สิ่งเหล่านี้{%และ%}แท็กคืออะไร?
  • โปรแกรมแยกวิเคราะห์ใดเรียกใช้โค้ดนี้
  • ...

... แต่อยากรู้ทุกอย่างเกี่ยวกับเรื่องนี้


เดี๋ยวก่อนคุณช่วยบอกฉันว่าคุณส่งข้อมูลด้วยการอัปโหลดได้อย่างไรเช่นฉันต้องการส่งสถานที่พร้อมไฟล์
NullPoiиteя

@ Mayankswami: ฉันไม่เข้าใจสิ่งที่คุณพยายามจะถามจากฉัน
Dyin

ฉันคิดว่าคุณใช้การอัปโหลดไฟล์ jquery ตั้งแต่ ฉันต้องการทราบวิธีการส่งข้อมูลแบบฟอร์มพร้อมไฟล์
NullPoiиteя

@ Mayankswami: ฉันคิดว่าคุณควรค้นหาคำถามของคุณในเว็บไซต์นี้และหากคุณไม่พบสิ่งที่ต้องการให้สร้างคำถาม
Dyin

รหัสเดียวกันนี้ที่ฉันได้เห็นในโปรแกรมอัปโหลดไฟล์ jquery ดังนั้นขอ
ขอบคุณ

คำตอบ:


64

x-tmpl ไม่มีความหมายที่แท้จริงเพียงแค่หยุดเบราว์เซอร์จากการแปลสคริปต์เป็นจาวาสคริปต์

มันส่วนใหญ่จะใช้กับแม่แบบ jQuery หรือknockoutjs แม่แบบที่มีผลผูกพัน

ในบางจุดวัตถุข้อมูลจาวาสคริปต์จะถูกใช้ร่วมกับเทมเพลตเพื่อแสดงผล html ค่าในออบเจ็กต์ข้อมูลจะแทนที่ค่าที่มีเครื่องหมาย {%} และคล้ายกันในเทมเพลตโดยมี {%} บางส่วนที่แสดงถึงการไหลของโค้ดเช่นลูปเป็นต้น

ฉันไม่แน่ใจว่าไลบรารีเทมเพลตใดใช้ {%} แต่ไม่ใช่เทมเพลต jquery, jsrender หรือสิ่งที่น่าพิศวง คุณต้องตรวจสอบว่ามีการอ้างอิงไลบรารีใดบ้างในโค้ดตัวอย่าง


25
ฉันได้พบมันนี่แม่ JavaScript สคริปต์ถูกอ้างอิงจากไซต์นี้ ตอนนี้มันสมเหตุสมผลแล้ว ขอบคุณสำหรับ Brefing!
Dyin

1
jQuery ไม่ทำงานเมื่อฉันแสดง HTML ด้วย x-tmpl ตัวอย่างเช่นฉันมีช่องทำเครื่องหมายที่แสดงผลภายใน 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

12

text / x-tmpl คืออะไร?

ที่ไม่ได้มาตรฐาน ดูเหมือนแม่แบบ

แท็ก {% และ%} เหล่านี้คืออะไร

เป็นส่วนหนึ่งของภาษาเทมเพลต

โปรแกรมแยกวิเคราะห์ใดเรียกใช้โค้ดนี้

อาจเป็นข้อความที่เขียนด้วย JavaScript และนำเข้าใน<script>องค์ประกอบอื่นในหน้าเดียวกัน



-3

โค้ดด้านบนอ้างอิงถึงโครงการ Django Jquery File Upload ที่นี่https://github.com/sigurdga/django-jquery-file-upload

{%%} คือแท็กเทมเพลต Django ดูข้อมูลเพิ่มเติมได้ที่https://docs.djangoproject.com/en/dev/ref/templates/

แท็กเหล่านี้จะถูกแยกวิเคราะห์โดยระบบเทมเพลต django


2
การค้นคว้าเพิ่มเติมเกี่ยวกับเรื่องนี้ฉันพบว่าคำตอบของฉันผิด ในกรณีนี้แท็กจะถูกใช้โดยไลบรารี Javascript github.com/sigurdga/django-jquery-file-upload/blob/master/…เป็นวิธีการแสดงเนื้อหา HTML แบบเรียลไทม์โดยอิงตามผลของการดำเนินการ AJAX
czager

7
แท็กเหล่านี้ไม่ใช่แท็กเทมเพลต Django แต่เป็นแท็กเทมเพลต Javascript โดย Sebastian Tschan: blueimp.github.com/JavaScript-Templates
Ricardo Carmo
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.