บทความนี้เป็นบทช่วยสอนเบื้องต้นสำหรับ JSrender ซึ่งเป็นตัวอย่างอธิบายจุดความรู้เช่นการใช้แท็กอื่นและการเข้าถึงข้อมูลที่ซ้อนกันกับข้อมูลผู้ปกครอง แบ่งปันสำหรับการอ้างอิงของคุณ รายละเอียดมีดังนี้:
คำนำ
JSrender เป็นเครื่องยนต์เทมเพลต JavaScript ที่ใช้ jQuery มีคุณสมบัติดังต่อไปนี้:
・ ง่ายและใช้งานง่าย
· ทรงพลัง
・ ขยายได้
・ เร็วเท่าฟ้าผ่า
คุณสมบัติเหล่านี้ดูน่าทึ่ง แต่เกือบทุกเทมเพลตเอ็นจิ้นจะได้รับการโฆษณาเช่นนี้ - -
เนื่องจากความต้องการในการทำงาน Xiaocai จึงติดต่อกับเอ็นจิ้นเทมเพลตนี้ หลังจากใช้มาระยะหนึ่งแล้วฉันก็พบว่ามันค่อนข้างทรงพลัง แต่ Xiaocai รู้สึกว่าบางสถานที่มีพลังมากเกินไปซึ่งทำให้ผู้คนพบว่ายากที่จะเข้าใจ
ในทางกลับกันเอกสารอย่างเป็นทางการของ JSrender นั้นค่อนข้างมีรายละเอียด แต่มีข้อมูลอื่น ๆ อีกสองสามอย่างที่น่าประหลาดใจ หากคุณพบปัญหาใด ๆ คุณสามารถค้นหาได้โดยทั่วไป ไม่เพียง แต่คุณสามารถหาปัญหาที่เกี่ยวข้องได้ แต่แทบจะไม่มีผลลัพธ์
นอกจากนี้บางส่วนของ JSrender นั้นยากที่จะเข้าใจดังนั้นฉันจึงต้องการ "แนวทางปฏิบัติที่ดีที่สุด" อย่างเร่งด่วน
จากการใช้งานล่าสุด Xiaocai ได้สรุปประสบการณ์การปฏิบัติบางอย่างและแน่นอนว่าประสบการณ์เหล่านี้ไม่สามารถพบได้ในเอกสารอย่างเป็นทางการ
ห่วงซ้อนกันเพื่อเข้าถึงข้อมูลหลักโดยใช้ #Parent (ไม่แนะนำ)
คัดลอกรหัสดังต่อไปนี้: <! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> ห่วงซ้อนกันโดยใช้ #Parent เพื่อเข้าถึงข้อมูลหลัก --- โดย Yang Yuan </title>
<style>
</style>
</head>
<body>
<div>
<table>
<head>
<tr>
<th> หมายเลขซีเรียล </th>
<th> ชื่อ </th>
<th> สมาชิกในครอบครัว </th>
</tr>
</head>
<tbody id = "รายการ">
</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> {{: ชื่อ}} </td>
<td>
{{สำหรับครอบครัว}}
{{!-ใช้ #Parent เพื่อเข้าถึงดัชนีหลัก-}}
<b> {{:#parent.parent.index + 1}}. {{:#index + 1}} </b>
{{!-ใช้ #Parent เพื่อเข้าถึงข้อมูลหลักและข้อมูลพาเรนต์จะถูกบันทึกไว้ในแอตทริบิวต์ข้อมูล-}}
{{!-#Data เทียบเท่ากับสิ่งนี้-}}
{{: #data}} ของ {{: #data}}
{{/สำหรับ}}
</td>
</tr>
</script>
<script>
// แหล่งข้อมูล
var dataSrouce = [{
ชื่อ: "จางซาน"
ตระกูล: [
"พ่อ",
"แม่",
"พี่ชาย"
-
-
ชื่อ: "Li Si",
ตระกูล: [
"ปู่",
"ยาย",
"ลุง"
-
-
// การแสดงผลข้อมูล
var html = $ ("#testtmpl"). render (dataSrouce);
$ ("#list") ภาคผนวก (HTML);
</script>
</body>
</html>
ลูปซ้อนกันเพื่อเข้าถึงข้อมูลหลักโดยใช้พารามิเตอร์ (แนะนำ)
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> ลูปซ้อนกันใช้พารามิเตอร์เพื่อเข้าถึงข้อมูลหลัก --- โดย Yang Yuan </title>
<style>
</style>
</head>
<body>
<div>
<table>
<head>
<tr>
<th> หมายเลขซีเรียล </th>
<th> ชื่อ </th>
<th> สมาชิกในครอบครัว </th>
</tr>
</head>
<tbody id = "รายการ">
</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> {{: ชื่อ}} </td>
<td>
{{!- เมื่อใช้ A for loop คุณสามารถเพิ่มพารามิเตอร์ในภายหลัง พารามิเตอร์จะต้องเริ่มต้นด้วย ~ และพารามิเตอร์หลายตัวจะถูกคั่นด้วยช่องว่าง-}}
{{!- ผ่านพารามิเตอร์เราแคชข้อมูลหลัก โดยการเข้าถึงพารามิเตอร์ในลูปเด็กเราสามารถเข้าถึงข้อมูลหลักได้ทางอ้อม-}}
{{สำหรับครอบครัว ~ parentIndex =#index ~ parentName = name}}
<b> {{: ~ parentindex + 1}}. {{:#index + 1}} </b>
{{!-#Data เทียบเท่ากับสิ่งนี้-}}
{{: #data}} ของ {{: ~ parentName}}
{{/สำหรับ}}
</td>
</tr>
</script>
<script>
// แหล่งข้อมูล
var dataSrouce = [{
ชื่อ: "จางซาน"
ตระกูล: [
"พ่อ",
"แม่",
"พี่ชาย"
-
-
ชื่อ: "Li Si",
ตระกูล: [
"ปู่",
"ยาย",
"ลุง"
-
-
// การแสดงผลข้อมูล
var html = $ ("#testtmpl"). render (dataSrouce);
$ ("#list") ภาคผนวก (HTML);
</script>
</body>
</html>
ใช้อย่างอื่นในแท็กที่กำหนดเอง (ไม่แนะนำอย่างยิ่ง)
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> ใช้อย่างอื่นในแท็กที่กำหนดเอง --- โดย Yang Yuan </title>
<style>
</style>
</head>
<body>
<div>
<table>
<head>
<tr>
<th> ชื่อ </th>
<th> ราคาต่อหน่วย </th>
</tr>
</head>
<tbody id = "รายการ">
</tbody>
</table>
</div>
<script src = "jQuery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-กำหนดเทมเพลต JSrender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{: ชื่อ}} </td>
<td>
{{!-iSshow เป็นแท็กที่กำหนดเองราคาคือพารามิเตอร์ที่ผ่านสถานะเป็นคุณสมบัติเพิ่มเติม-}}
{{สถานะราคา ISSHOW = 0}}
{{:ราคา}}
{{สถานะราคาอื่น ๆ = 1}}
-
{{/isshow}}
</td>
</tr>
</script>
<script>
// แหล่งข้อมูล
var dataSrouce = [{
ชื่อ: "Apple",
ราคา: 108
-
ชื่อ: "da li",
ราคา: 370
-
ชื่อ: "พีช",
ราคา: 99
-
ชื่อ: "สับปะรด",
ราคา: 371
-
ชื่อ: "Orange",
ราคา: 153
-
// แท็กที่กำหนดเอง
$ .views.tags ({
"iSshow": ฟังก์ชั่น (ราคา) {
var temp = ราคา+''. แยก ('');
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), 3))) {
ส่งคืนสิ่งนี้ tagctxs [0] .render ();
}อื่น{
ส่งคืนสิ่งนี้ tagctxs [1] .render ();
-
}อื่น{
กลับ "";
-
-
-
// การแสดงผลข้อมูล
var html = $ ("#testtmpl"). render (dataSrouce);
$ ("#list") ภาคผนวก (HTML);
</script>
</body>
</html>
ใช้ผู้ช่วยแทนแท็กที่กำหนดเอง (แนะนำ)
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> ใช้ผู้ช่วยแทนแท็กที่กำหนดเอง --- โดย Yang Yuan </title>
<style>
</style>
</head>
<body>
<div>
<table>
<head>
<tr>
<th> ชื่อ </th>
<th> ราคาต่อหน่วย </th>
</tr>
</head>
<tbody id = "รายการ">
</tbody>
</table>
</div>
<script src = "jQuery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-กำหนดเทมเพลต JSrender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{: ชื่อ}} </td>
<td>
{{!-ใช้ Native If for Branch Jump ใช้ตัวช่วยสำหรับการประมวลผลเชิงตรรกะ-}}
{{ถ้า ~ isshow (ราคา)}}
{{:ราคา}}
{{อื่น}}
-
{{/ถ้า}}
</td>
</tr>
</script>
<script>
// แหล่งข้อมูล
var dataSrouce = [{
ชื่อ: "Apple",
ราคา: 108
-
ชื่อ: "da li",
ราคา: 370
-
ชื่อ: "พีช",
ราคา: 99
-
ชื่อ: "สับปะรด",
ราคา: 371
-
ชื่อ: "Orange",
ราคา: 153
-
// ผู้ช่วย
$ .views.helpers ({
"iSshow": ฟังก์ชั่น (ราคา) {
var temp = ราคา+''. แยก ('');
if (price == (math.pow (parseint (temp [0], 10), 3)+math.pow (parseint (temp [1], 10), 3)+math.pow (parseint (temp [2], 10), 3))) {
กลับมาจริง;
}อื่น{
กลับเท็จ;
-
-
-
// การแสดงผลข้อมูล
var html = $ ("#testtmpl"). render (dataSrouce);
$ ("#list") ภาคผนวก (HTML);
</script>
</body>
</html>
คลิกที่นี่เพื่อดาวน์โหลดรหัสตัวอย่างที่สมบูรณ์
ฉันหวังว่าบทความนี้จะเป็นประโยชน์ต่อการเรียนรู้การเขียนโปรแกรม JSRender ของทุกคน