هذه المقالة عبارة عن برنامج تعليمي تمهيدي عملي لـ JSRender ، والذي يصف أمثلة نقاط المعرفة مثل استخدام العلامة الأخرى والوصول المتداخل إلى بيانات الوالدين. شاركه للرجوع إليه. التفاصيل كما يلي:
مقدمة
JSRender هو محرك قالب JavaScript يعتمد على jQuery. لديها الميزات التالية:
・ بسيطة وبديهية
・ قوي
・ قابلة للتمديد
・ بأسرع البرق
تبدو هذه الميزات مذهلة ، ولكن سيتم الإعلان عن كل محرك قالب تقريبًا مثل هذا. . .
بسبب احتياجات العمل ، تلامس Xiaocai مع محرك القالب هذا. بعد استخدامه لفترة من الوقت ، وجدت أنه بالفعل قوي للغاية ، لكن Xiaocai يشعر أن بعض الأماكن قوية للغاية ، مما يجعل الناس يجدون صعوبة في فهمه.
من ناحية أخرى ، فإن المستندات الرسمية لـ JSRender مفصلة نسبيًا ، ولكن هناك القليل من المعلومات الأخرى. إذا واجهت أي مشاكل ، يمكنك في الأساس عدم البحث. لا يمكنك فقط العثور على المشكلات ذات الصلة ، ولكن لا توجد نتيجة تقريبًا.
بالإضافة إلى ذلك ، يصعب بالفعل فهم بعض أجزاء JSRender ، لذلك أحتاج إلى بعض "أفضل الممارسات" للمشاركة.
استنادًا إلى الاستخدام الحديث ، لخص Xiaocai بعض التجارب العملية ، وبالطبع ، لا يمكن العثور على هذه التجارب في الوثائق الرسمية.
حلقة متداخلة للوصول إلى بيانات الوالدين باستخدام #Parent (غير موصى بها)
انسخ الرمز كما يلي: <! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> حلقة متداخلة باستخدام #Parent للوصول إلى بيانات الأصل --- بقلم يانغ يوان </title>
<style>
</style>
</head>
<body>
<viv>
<griding>
<head>
<tr>
<h> الرقم التسلسلي </th>
<h> الاسم </th>
<h> أفراد الأسرة </th>
</r>
</head>
<tbody id = "list">
</tbody>
</table>
</div>
<script src = "jquery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-تحديد قالب jsrender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{:#index + 1}} </td>
<td> {{: name}} </td>
<td>
{{for family}}
{{!-استخدم #parent للوصول إلى الفهرس الأصل-}}
<b> {{:#parent.parent.index + 1}}. {{:#index + 1}} </b>
{{!-استخدم #parent للوصول إلى بيانات الأصل ، ويتم حفظ البيانات الأصل في سمة البيانات-}}
{{!-#Data يعادل هذا-}}
{{: #data}} من {{: #data}}
{{/ل}}
</td>
</r>
</script>
<script>
// مصدر البيانات
var datasrouce = [{
الاسم: "Zhang San" ،
عائلة: [
"أب"،
"الأم"،
"الأخ الأكبر"
]
} ، {
الاسم: "لي سي" ،
عائلة: [
"الجد" ،
"جدة"،
"عم"
]
}] ؛
// تقديم البيانات
var html = $ ("#testtmpl").
$ ("#list"). إلحاق (html) ؛
</script>
</body>
</html>
حلقات متداخلة للوصول إلى بيانات الأصل باستخدام المعلمات (الموصى بها)
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> حلقات متداخلة استخدم المعلمات للوصول إلى بيانات الأصل --- بقلم يانغ يوان </title>
<style>
</style>
</head>
<body>
<viv>
<griding>
<head>
<tr>
<h> الرقم التسلسلي </th>
<h> الاسم </th>
<h> أفراد الأسرة </th>
</r>
</head>
<tbody id = "list">
</tbody>
</table>
</div>
<script src = "jquery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-تحديد قالب jsrender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{:#index + 1}} </td>
<td> {{: name}} </td>
<td>
{{!- عند استخدام حلقة ، يمكنك إضافة معلمات بعد ذلك. يجب أن تبدأ المعلمات بـ ~ ، ويتم فصل المعلمات المتعددة بواسطة المسافات-}}
{{!- من خلال المعلمات ، نقوم بتخزين بيانات الأصل. عن طريق الوصول إلى المعلمات في حلقة الطفل ، يمكننا الوصول بشكل غير مباشر إلى البيانات الأصل-}}
{{for family ~ parentIndex =#index ~ parentname = name}}
<b> {{: ~ parentIndex + 1}}. {{:#index + 1}} </b>
{{!-#Data يعادل هذا-}}
{{: #data}} من {{: ~ parentname}}
{{/ل}}
</td>
</r>
</script>
<script>
// مصدر البيانات
var datasrouce = [{
الاسم: "Zhang San" ،
عائلة: [
"أب"،
"الأم"،
"الأخ الأكبر"
]
} ، {
الاسم: "لي سي" ،
عائلة: [
"الجد" ،
"جدة"،
"عم"
]
}] ؛
// تقديم البيانات
var html = $ ("#testtmpl").
$ ("#list"). إلحاق (html) ؛
</script>
</body>
</html>
استخدم آخر في العلامات المخصصة (غير موصى به للغاية)
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> استخدم آخر في العلامات المخصصة --- بقلم يانغ يوان </title>
<style>
</style>
</head>
<body>
<viv>
<griding>
<head>
<tr>
<h> الاسم </th>
<h> سعر الوحدة </th>
</r>
</head>
<tbody id = "list">
</tbody>
</table>
</div>
<script src = "jquery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-تحديد قالب jsrender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{: name}} </td>
<td>
{{!-isShow هي علامة مخصصة ، السعر هو المعلمة التي تم تمريرها ، الحالة هي خاصية إضافية-}}
{{isShow Price Status = 0}}
{{:سعر}}
{{آخر حالة السعر = 1}}
-
{{/isShow}}
</td>
</r>
</script>
<script>
// مصدر البيانات
var datasrouce = [{
الاسم: "Apple" ،
السعر: 108
} ، {
الاسم: "دا لي" ،
السعر: 370
} ، {
الاسم: "الخوخ" ،
السعر: 99
} ، {
الاسم: "الأناناس" ،
السعر: 371
} ، {
الاسم: "Orange" ،
السعر: 153
}] ؛
// علامة مخصصة
$ .views.tags ({
"iSshow": وظيفة (السعر) {
var temp = price+''. split ('') ؛
if (this.tagctx.props.status === 0) {
// احكم على ما إذا كان السعر هو عدد النرجس. إذا كان الأمر كذلك ، فسيتم عرضه ، وإلا فلن يتم عرضه.
if (price == (math.pow (parseint (temp [0] ، 10) ، 3)+math.pow (parseint (temp [1] ، 10) ، 3)+math.pow (parseint (temp [2] ، 10))) {
إرجاع this.tagctxs [0] .render () ؛
}آخر{
إرجاع this.tagctxs [1] .render () ؛
}
}آخر{
يعود ""؛
}
}
}) ؛
// تقديم البيانات
var html = $ ("#testtmpl").
$ ("#list"). إلحاق (html) ؛
</script>
</body>
</html>
استخدم المساعد بدلاً من العلامات المخصصة (الموصى به)
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> استخدم المساعد بدلاً من العلامات المخصصة --- بقلم يانغ يوان </title>
<style>
</style>
</head>
<body>
<viv>
<griding>
<head>
<tr>
<h> الاسم </th>
<h> سعر الوحدة </th>
</r>
</head>
<tbody id = "list">
</tbody>
</table>
</div>
<script src = "jquery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-تحديد قالب jsrender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{: name}} </td>
<td>
{{!-استخدم Native If for Branch Jump ، استخدم المساعد للمعالجة المنطقية-}}
{{if ~ isShow (price)}}
{{:سعر}}
{{آخر}}
-
{{/لو}}
</td>
</r>
</script>
<script>
// مصدر البيانات
var datasrouce = [{
الاسم: "Apple" ،
السعر: 108
} ، {
الاسم: "دا لي" ،
السعر: 370
} ، {
الاسم: "الخوخ" ،
السعر: 99
} ، {
الاسم: "الأناناس" ،
السعر: 371
} ، {
الاسم: "Orange" ،
السعر: 153
}] ؛
//المساعد
$ .views.helpers ({
"iSshow": وظيفة (السعر) {
var temp = price+''. split ('') ؛
if (price == (math.pow (parseint (temp [0] ، 10) ، 3)+math.pow (parseint (temp [1] ، 10) ، 3)+math.pow (parseint (temp [2] ، 10))) {
العودة صحيح.
}آخر{
العودة كاذبة
}
}
}) ؛
// تقديم البيانات
var html = $ ("#testtmpl").
$ ("#list"). إلحاق (html) ؛
</script>
</body>
</html>
انقر هنا لتنزيل رمز المثال الكامل.
آمل أن يكون هذا المقال مفيدًا لتعلم برمجة JSRender للجميع.