วิธีใช้
รวบรวมเทมเพลตและแสดงผลทันทีตามข้อมูล
คั้นน้ำผลไม้ (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);