هناك العديد من الخيارات لقوالب المصادر المفتوحة للعقدة ، ولكن يوصى باستخدام كبار السن مثلي EJS. من الطبيعي استخدام EJS مع خبرة في ASP/PHP/JSP الكلاسيكية. بمعنى أنه يمكنك ترتيب رمز JavaScript في كتلة <٪ ... ٪> واستخدام <٪ = متغير الإخراج ٪> بالطريقة الأكثر تقليدية (بالإضافة إلى ذلك ، <٪-لن يهرب متغيرات الإخراج من رموز مثل &). أمر تثبيت EJS كما يلي:
NPM تثبيت EJS
دعوة JS
هناك طريقتان رئيسيتان يدعوهما JS:
eJs.Compile (str ، الخيارات) ؛ // => function ejs.render (Str ، Options) ؛ // => str
في الواقع ، يمكن استخدام EJS بشكل مستقل عن Express ، على سبيل المثال:
var ejs = require ('') ، str = require ('fs'). readfilesync (__ dirname + '/list.ejs' ، 'utf8') ؛ var ret = ejs.render (str ، {names: ['foo' ، 'bar' ، 'baz']}) ؛ console.log (ret) ؛ انظر ejs.render (). المعلمة الأولى هي سلسلة القالب ، والقالب كما يلي. <٪ if (names.length) {٪> <ul> <٪ names.foreach (function (name) {٪> <li foo = '<٪ = name + "' '' '' '> <٪ = name ٪> </li> <٪}) ٪> </ul> <٪} ٪>تصبح الأسماء متغيرات محلية.
معلمات الخيار
المعلمة الثانية هي البيانات ، والتي عادة ما تكون كائن. يمكن اعتبار هذا الكائن خيارًا ، مما يعني أن البيانات والاختيار موجودون على نفس الكائن.
إذا كنت لا ترغب في الحصول على أقراص في كل مرة ، فأنت بحاجة إلى ذاكرة التخزين المؤقت للقالب وتعيين الخيارات. على سبيل المثال:
var ejs = require ('../') ، fs = require ('fs') ، path = __dirname + '/functions.ejs' ، str = fs.readfilesync (path ، 'utf8') ؛ var users = [] ؛ users.push ({name: 'tobi' ، العمر: 2 ، الأنواع: 'ferret'}) المستخدمين. console.log (ret) ؛COSULDE Command
وإذا كنت تريد
<ul> <٪ users.foreach (function (user) {٪> <٪ تضمين المستخدم/show ٪> <٪}) ٪> </ul>بشكل عام ، إدراج قالب مشترك ، أي إدخال ملف ، يجب عليك تعيين خيار اسم الملف لبدء ميزة Include ، وإلا فلن يعرف الدليل الذي يقع فيه.
نموذج:
<H1> المستخدمون </h1> <٪ مستخدم الوظيفة (المستخدم) {٪> <li> <strong> <٪ = user.name ٪> </strong> هو <٪ = user.age ٪> سنة <٪ = user.species ٪>. </li> <٪} ٪> <ul> <٪ مستخدمين.EJS يدعم قوالب تجميع. بعد تجميع القالب ، لا توجد عملية IO ، ستكون سريعة جدًا ويمكن استخدامها للمتغيرات المحلية. يتجاهل المستخدم التالي/العرض امتداد EJS:
<ul> <٪ users.foreach (function (user) {٪> <٪ تضمين المستخدم/show ٪> <٪}) ٪> </ul>وثيق مخصص التبل
إذا كنت تخطط لاستخدام <h1> {{= title}} </h1> علامة غير عمومًا-<٪٪> ، يمكنك أيضًا تخصيصها.
var ejs = require ('ejs') ؛ ejs.open = '{{' ؛ ejs.close = '}}' ؛ الإخراج التنسيق هو أيضا على ما يرام. ejs.filters.last = function (obj) {return obj [obj.length - 1] ؛ } ؛ مُسَمًّى:<p> <٪ =: المستخدمون | الماضي ٪> </p>EJS تدعم أيضا بيئات المتصفح.
<html> <head> <script src = "../ ejs.js"> </script> <script id = "users" type = "text/template"> <٪ if (names.length) {٪> <ul> <٪ names. <script> onload = function () {var users = document.getElementById ('المستخدمين'). innerhtml ؛ names var = ['loki' ، 'Tobi' ، 'Jane'] ؛ var html = ejs.render (المستخدمين ، {names: names}) ؛ document.body.innerhtml = html ؛ } </script> </head> <body> </body> </html> أتساءل عما إذا كان بإمكان EJS إخراج كائنات JSON متعددة الطبقات؟بالمناسبة ، كشف بعض مستخدمي الإنترنت أن JQ Master John كتب قالبًا من 20 سطرًا قبل عدة سنوات ، وهو ما يخجل ، على غرار EJS ولكنه قصير وموجز!
محرك قالب JS بسيط وعملي
يدعم محرك قالب JS مع أقل من 50 خطًا مختلفًا من بناء جملة JS:
<script id = "test_list" type = "text/html"> <٪ = for (var i = 0 ، l = p.list.length ؛ i <l ؛ i ++) {var stu = p.list [i] ؛ = ٪> <tr> <td <٪ = if (i == 0) {= ٪> <٪ =} = ٪ >> <٪ == stu.name = ٪> </td> <td> <٪ == stu.age = ٪> </td> <td> <٪ == (stu.address || ') = ٪>"<٪ = xxx = ٪>" هو رمز منطق JS ، و "<٪ == xxx = ٪>" هو متغير الإخراج المباشر ، على غرار وظيفة الصدى في PHP. "P" هي معلمة كائن KV عند استدعاء طريقة الإنشاء التالية. يمكن أيضًا ضبطها على اسم معلمة آخر عند استدعاء "New JTemp"
مُسَمًّى:
$ (function () {var temp = new jtemp ('test_list') ، html = temp.build ({list: [{name: 'Zhang San' ، age: 13 ، العنوان: 'beijing'} ، {name: 'li si' ، act: 17 ، العنوان: 'tianjin'} ، $ ('table'). html (html) ؛بعد إنشاء درجة الحرارة أعلاه ، يمكن استدعاء طريقة الإنشاء عدة مرات لإنشاء HTML. فيما يلي رمز محرك القالب:
var jtemp = function () {function temp (htmlid ، p) {p = p || {} ؛ // معلومات التكوين ، في معظم الحالات ، this.htmlid = htmlid ؛ هذا. this.oname = p.oname || 'p' ؛ this.temp_s = p.temps || '<٪ =' ؛ this.temp_e = p.tempe || '= ٪>' ؛ this.getFun () ؛ } temp.prototype = {getFun: function () {var _ = this ، str = $ ('#' + _.htmlid) .html () ؛ if (! str) _.err ('خطأ: لا درجة الحرارة !!') ؛ var str_ = 'var' + _.oname + '= this ، f =/'/'؛' ، s = str.indexof (_. temp_s) ، e = -1 ، p ، sl = _.temp_s.length ، el = _.temp_e.length ؛ لـ (؛ s> = 0 ؛) {e = str.indexof (_. temp_e) ؛ إذا (e <s) تنبيه (':( خطأ !!) ؛ str_ +=' f +=/'' +str.substring (0 ، s) +'/' ؛ '؛ P.SubString (1) ؛ '؛ } build: function (p)هو جوهر تحويل رمز القالب إلى وظيفة تصريح السلاسل ، وفي كل مرة تأخذ فيها وظيفة استدعاء البيانات.
لأنه يستخدم بشكل أساسي للهواتف المحمولة (WebKits) ، لا يتم النظر في كفاءة الربط السلسلة. إذا كان من الضروري استخدام IE ، فمن الأفضل تغيير طريقة الربط السلسلة إلى شكل Array.push ().
تخطيط تخطيط قالب EJS
1. إذا كنت غير راغب في استخدام التخطيط الافتراضي. ejs ، يمكنك تحديد ذلك بنفسك. على سبيل المثال:
res.Render ("index" ، {"title": "test" ، "layout": "main"}) ؛ // or res.Render ("index" ، {"title": "test" ، "layout": "main.ejs"}) ؛2. إذا كنت غير راغب في استخدام التصميم ، فيمكنك ضبط التصميم على خطأ ، على سبيل المثال:
res.Render ("index" ، {"Layout": false}) ؛3. إذا كنت لا تريد تعيين كل طلب بشكل منفصل. يمكن استخدام الإعدادات العالمية:
App.set ("View Options" ، {"Layout": false}) ؛4. في EJS ، تكون علامة الإغلاق الافتراضية <٪ .. ٪> ، ويمكننا أيضًا تحديد علاماتنا الخاصة. على سبيل المثال:
App.set ("View Options" ، {"open": "{{" ، "close": "}}"}) ؛5. التصميم المحلي
في تطبيقات الويب ، غالبًا ما يكون من الضروري عرض محتوى معين بشكل متكرر ، مثل وظيفة تعليق المستخدم ، والتي تتطلب العرض المتكرر لتعليق كل مستخدم. في هذا الوقت ، يمكننا تحقيق ذلك من خلال الحلقات. ومع ذلك ، يمكن أيضًا تنفيذها باستخدام [قالب جزئي] (جزئي). على سبيل المثال:
أولاً ، نقوم بإنشاء قالب محلي ./views/comment.ejs:
<viv> <viv> <٪ = comment.user ٪> </viv> <viv> <٪ = comment.content ٪> </viv> </viv>
ملاحظة: هنا comment.xxxx
ثم في ./views/index.ejs ، اتصل بالتعليق عبر جزئي
هذا هو <٪ = title ٪>! <br/> <٪- جزئي ("تعليق" ، تعليقات) ٪>ملاحظة: هنا جزء ("Comment.ejs" ، التعليقات) ؛ <- يجب أن تكون الكلمة صيغة الجمع.
وأخيرا ، في جهاز التوجيه ، استدعاء index.ejs.
app.get ("/" ، function (req ، res) {res.Render ("index" ، {"title": "test" ، "layout": false ، ]}) ؛ملاحظة: التعليقات في الكود هي نفس الاسم المتغير للتعليقات لـ INDEX.EJS ، وفي Comment.ejs يسمى بواسطة الجزئي ، يتم استخدام الشكل الفردي للتعليق.
عند عرض القوائم ، فإن السيناريو الذي نواجهه عادة هو عرض العنصر الأول أو العنصر الأخير خصيصًا. في جزء منه ، يمكننا استخدام المتغيرات المدمجة في Express لتحديد ما إذا كان الكائن الحالي هو العنصر الأول أو العنصر الأخير ، على سبيل المثال:
<viv> <viv> <٪ = comment.user ٪> </viv>: <viv> <٪ = comment.content ٪> </viv> </viv>
وبهذه الطريقة ، سيكون هناك FirstItem إضافي في فصل التعليق الأول.
تشمل المتغيرات المدمجة المماثلة:
(1) يكون FirstIncollection صحيحًا إذا كان العنصر الأول من الصفيف
(2) indexincollection فهرس العنصر الحالي في المصفوفة
(3) يكون آخر ما إذا كان هذا هو العنصر الأخير من المصفوفة
(4) CollectionLength
أخيرًا ، هناك مشكلة في البحث عن المسار عندما يستدعي الجزئي القالب:
(1) سيبحث جزئي ("تحرير") عن ملف edit.ejs في نفس الدليل.
(2) الجزئي ("../ message") سوف يبحث عن ملف message.ejs من دليل المستوى السابق.
(3) سيبحث جزئي ("المستخدمون") عن ملف المستخدمين. إذا لم يكن user.ejs موجودًا ، فسيتم البحث في ملف /users/index.ejs.
(4) <٪ = المستخدمين ٪> سوف يهربون من المحتوى. إذا كنت ترغب في الهروب منه ، يمكنك استخدام <٪- المستخدمين ٪>