دليل لاستخدام Juicer لمحرك القالب خفيف الوزن

كيفية استخدام

قم بتجميع القالب وقم بتقديم النتائج على الفور بناءً على البيانات

 العصارة (TPL ، البيانات) ؛

فقط تجميع القالب ولا تقدمه بعد ، إرجاع وظيفة تجميع قابلة لإعادة الاستخدام.

 var compiled_tpl = juicer (tpl) ؛

عرض القالب الذي تم تجميعه مسبقًا بناءً على البيانات المحددة

 var compiled_tpl = juicer (tpl) ؛ var html = compiled_tpl.render (data) ؛

تسجيل/تسجيل الدخول المخصص (كائن)

 juicer.register ('function_name' ، function) ؛ juicer.unregister ('function_name') ؛

تكوين المعلمة الافتراضي

 {cache: true [false] ؛ السيناريو: صحيح [خطأ] ؛ معالجة الخطأ: صحيح [خطأ] ؛ الكشف: صحيح [خطأ] ؛ }

قم بتعديل التكوين الافتراضي ، وقم بتعديله واحدًا تلو الآخر

 Juicer.set ('cache' ، false) ؛

تعديل التكوين الافتراضي ، تعديل الدُفعة

 juicer.set ({'script': false ، 'cache': false})

سيقوم Juicer بتخزين Cache المترجمة بشكل افتراضي ، وبالتالي تجنب الوقت الذي يقضيه بشكل متكرر في تجميع نفس القالب عند تقديم البيانات عدة مرات. إذا لم تكن هناك احتياجات خاصة ، فلا ينصح بشدة بإيقاف تشغيل ذاكرة التخزين المؤقت في المعلمات الافتراضية. سيؤدي القيام بذلك إلى إبطال ذاكرة التخزين المؤقت للعصارة وتقليل الأداء.

قواعد

* $ {متغير}

- استخدم متغير الإخراج $ {} ، حيث _ هو مرجع لمصدر البيانات ($ {_}). يدعم استخدام وظائف مخصصة.

 $ {name} $ {name | function} $ {name | function ، arg1 ، arg2}

 var = links: [{href: 'http://juicer.name' ، alt: 'juicer'} ، {href: 'http://benben.cc' ، alt: 'benben'} ، {href: 'http://tued.taoba.com' ، alt: '}}} ؛ var tpl = ['{@each links as euter}' ، '$ {item | inlys_build} <br />' ، '{@ /every}']. Join ('') ؛ var links = function (data) {return '<a href = "' + data.href + '" />' ؛ ؛ juicer.register('links_build '، links) ؛ // تسجيل وظيفة Custom Function Juicer (TPL ، JSON) ؛

* الهروب/تجنب الهروب

- $ {variable} سوف يفلت من محتوياته قبل الإخراج ، وإذا كنت لا تريد الهروب من الإخراج ، فيمكنك استخدام $$ {variable} لتجنب ذلك.

 var json = {value: '<strong> Juicer </strong>'} ؛ var excart_tpl = '$ {value}' ؛ var unescape_tpl = '$$ {value}' ؛ Juicer (Escape_tpl ، json) ؛ // Output '<strong> Juicer </strong>' Juicer (unescape_tpl ، json) ؛ // الإخراج '<strong> Juicer </strong>' '

*حلقة من خلال {each} ... {@/كل}

- التكرار عبر الصفيف ، $ {index} الفهرس الحالي

 {each list كبند ، index} $ {item.prop} $ {index} // الفهرس الحالي {@/كل}

*القاضي {@ef} ... {else if} ... {else} ... {@/if}

*التعليق {# التعليق محتوى}

{# هنا هو محتوى التعليق}

*حلقة مساعدة {each i في المدى (m ، n)}

 {each i in Range (5 ، 10)} $ {i} ؛ // الإخراج 5 ؛ 6 ؛ 7 ؛ 8 ؛ 9 ؛ {@/كل}

*تداخل فرعي {inClude TPL ، البيانات}

-يمكن أيضًا استخدام التعشيش الفرعي بالإضافة إلى تقديم التزحف الفرعي المحدد في البيانات ، رمز التثبيت الفرعي المكتوبة في علامة "البرنامج النصي" عن طريق تحديد السلسلة "#id`.

- رمز HTML:

 <script type = "text/juicer" id = "subtpl"> أنا محتوى فرعي ، $ {name} </script>

- رمز JavaScript:

 var tpl = 'hi ، {inClude "#Subtpl" ، subdata} ، end.' ؛ Juicer (tpl ، {subdata: {name: 'juicer'}}) ؛ // open hi ، أنا محتوى فرعي ، juic ، نهاية. // أو إدخال templates من خلال البيانات ، سيكون للرمز التالي أيضًا نفس نتيجة العرض: var tpl = 'hi ، {include subtpl ، subdata} ، end.' ؛ Juicer (tpl ، {subtpl: "أنا محتوى فرعي ، $ {name}" ، subdata: {name: 'Juicer'}}) ؛

مثال كامل

رمز HTML:

 <script id = "tpl" type = "text/template"> <ul> {each list as It ، index} <li> $ {it.name} (index: $ {index}) </li> it2} $ {it2time} <br/> {@/كل} {@/if} </li> {@/كل} </ul> </script>

رمز JavaScript:

 var data = {list: [{name: 'gookai' ، show: true} ، {name: 'benben' ، show: false} ، {name: 'dierbaby' ، show: true}] ، blah: [{num: 1} ، {num: 2} ، {num: 3 ، in: '16: 00 '} ، {' time ': '17: 00'} ، {'time': '18: 00 '}]} ، {num: 4}]} ؛ var tpl = document.getElementById ('tpl'). innerhtml ؛ var html = juicer (tpl ، data) ؛