คำแนะนำในการใช้เครื่องคั้นน้ำผลไม้สำหรับเครื่องยนต์เทมเพลตน้ำหนักเบา

วิธีใช้

รวบรวมเทมเพลตและแสดงผลทันทีตามข้อมูล

 คั้นน้ำผลไม้ (TPL, ข้อมูล);

คอมไพล์เทมเพลตเท่านั้นและยังไม่แสดงผลให้ส่งคืนฟังก์ชั่นคอมไพล์ที่นำกลับมาใช้ใหม่ได้

 var compiled_tpl = juicer (tpl);

แสดงเทมเพลตที่รวบรวมไว้ก่อนหน้านี้ตามข้อมูลที่กำหนด

 var compiled_tpl = juicer (tpl); var html = compiled_tpl.render (ข้อมูล);

ฟังก์ชั่นการลงทะเบียน/เข้าสู่ระบบ (วัตถุ)

 juicer.register ('function_name', ฟังก์ชั่น); juicer.unregister ('function_name');

การกำหนดค่าพารามิเตอร์เริ่มต้น

 {แคช: จริง [เท็จ]; สคริปต์: จริง [เท็จ]; การจัดการข้อผิดพลาด: จริง [เท็จ]; การตรวจจับ: จริง [เท็จ]; -

แก้ไขการกำหนดค่าเริ่มต้นแก้ไขทีละตัว

 juicer.set ('แคช', เท็จ);

แก้ไขการกำหนดค่าเริ่มต้นการปรับเปลี่ยนแบทช์

 Juicer.set ({'script': false, 'cache': false})

คั้นน้ำผลไม้จะแคชเทมเพลตที่รวบรวมโดยค่าเริ่มต้นดังนั้นจึงหลีกเลี่ยงเวลาที่ใช้ในการรวบรวมเทมเพลตเดียวกันซ้ำ ๆ เมื่อข้อมูลถูกแสดงผลหลายครั้ง หากไม่มีความต้องการพิเศษก็ไม่แนะนำอย่างยิ่งให้ปิดแคชในพารามิเตอร์เริ่มต้น การทำเช่นนี้จะทำให้แคชคั้นน้ำผลไม้ไม่ถูกต้องและลดประสิทธิภาพ

ไวยากรณ์

* $ {ตัวแปร}

- ใช้ตัวแปรเอาต์พุต $ {} โดยที่ _ เป็นการอ้างอิงถึงแหล่งข้อมูล ($ {_}) รองรับการใช้ฟังก์ชั่นที่กำหนดเอง

 $ {name} $ {ชื่อ | function} $ {name | function, arg1, arg2}

 var = ลิงก์: [{href: 'http://juicer.name', alt: 'juicer'}, {href: 'http://benben.cc', alt: 'benben'}, {href: var tpl = ['{@each ลิงก์เป็นรายการ}', '$ {item | links_build} <br />', '{@ /แต่ละ}']. เข้าร่วม (''); var links = function (data) {return '<a href = "' + data.href + '" />';ron; juicer.register('links_build', ลิงก์); // ลงทะเบียนฟังก์ชั่นที่กำหนดเองคั้นน้ำผลไม้ (TPL, JSON);

* หลบหนี/หลีกเลี่ยงการหลบหนี

- $ {Variable} จะหลบหนีเนื้อหาก่อนเอาต์พุตและหากคุณไม่ต้องการให้เอาต์พุตหลบหนีคุณสามารถใช้ $$ {Variable} เพื่อหลีกเลี่ยงสิ่งนี้

 var json = {value: '<strong> Juicer </strong>'}; var Escape_tpl = '$ {value}'; var unescape_tpl = '$$ {value}'; คั้นน้ำผลไม้ (Escape_tpl, JSON); // output '<strong> juicer </strong>' คั้นน้ำผลไม้ (unescape_tpl, json); // output '<strong> Juicer </strong>'

*วนซ้ำ {@each} ... {@/แต่ละ}

- วนซ้ำอาร์เรย์ $ {ดัชนี} ดัชนีปัจจุบัน

 {@each list เป็นรายการ, ดัชนี} $ {item.prop} $ {index} // ดัชนีปัจจุบัน {@/แต่ละ}

*ตัดสิน {@if} ... {@else if} ... {@else} ... {@/if}

*ความคิดเห็น {# ความคิดเห็นเนื้อหา}

{# นี่คือเนื้อหาความคิดเห็น}

*Auxiliary Loop {@each I ในช่วง (M, N)}

 {@each i ในช่วง (5, 10)} $ {i}; // เอาท์พุท 5; 6; 7; 8; 9; {@/แต่ละ}

*Sub-template Nesting {@include tpl, data}

-การทำรังแบบ template นอกเหนือจากการแนะนำ templates ย่อยที่ระบุในข้อมูลรหัส sub-template ที่เขียนในแท็กสคริปต์ `สามารถใช้งานได้โดยการระบุสตริง`#id`

- รหัส HTML:

 <script type = "text/uicer" id = "subtpl"> ฉันเป็นเนื้อหาย่อย, $ {name} </script>

- รหัส JavaScript:

 var tpl = 'hi, {@include "#subtpl", subdata}, end.'; juicer (tpl, {subdata: {ชื่อ: 'juicer'}}); // เปิดสวัสดีฉันเนื้อหาย่อย // หรือแนะนำ templates ย่อยผ่านข้อมูลรหัสต่อไปนี้จะมีผลการเรนเดอร์เดียวกัน: var tpl = 'hi, {@include subtpl, subdata}, สิ้นสุด'; Juicer (tpl, {subtpl: "ฉันเป็นเนื้อหาย่อย, $ {name}", subdata: {ชื่อ: 'juicer'}});

ตัวอย่างที่สมบูรณ์

รหัส HTML:

 <script id = "tpl" type = "text/template"> <ul> {@each list as it, index} <li> $ {it.name} (ดัชนี: $ {ดัชนี}) </li> {@/แต่ละ} {@each blah ตามที่} $ {it2.time} <br/> {@/แต่ละ} {@/if} </li> {@/แต่ละ} </ul> </ul> </ul> </ul> </ul> </ul>

รหัส JavaScript:

 var data = {list: [{name: 'guokai', show: true}, {ชื่อ: 'Benben', แสดง: false}, {ชื่อ: 'dierbaby', แสดง: true}], blah: [{num: 1}, {num: 2}, {num: 3, inner: '16: 00 '}, {' เวลา ': '17: 00'}, {'เวลา': '18: 00 '}]}, {num: 4}]}; var tpl = document.getElementById ('tpl'). innerhtml; var html = uicer (tpl, data);