บทความนี้อธิบายสั้น ๆ เกี่ยวกับไวยากรณ์พื้นฐานของ JSrender สำหรับวัตถุ แบ่งปันสำหรับการอ้างอิงของคุณ รายละเอียดมีดังนี้:
ในฐานะที่เป็นเอ็นจิ้นเทมเพลต JavaScript JSRender เป็นสิ่งสำคัญที่จะต้องมีฟังก์ชั่นการวนซ้ำนั่นคือสำหรับ อย่างไรก็ตามเนื่องจาก JSrender มีความยืดหยุ่นเกินไปเพราะสามารถยอมรับวัตถุเป็นวัตถุลูปได้จริง
ทั้ง {{สำหรับอาร์เรย์}} และ {{สำหรับวัตถุ}} ได้รับอนุญาต ทุกคนสามารถเข้าใจ {{สำหรับอาร์เรย์}} ซึ่งก็คือการสำรวจอาร์เรย์และนำองค์ประกอบแต่ละอย่างทีละตัว แต่ {{สำหรับวัตถุ}} นั้นเหลือเชื่อเล็กน้อยและเอกสารอย่างเป็นทางการก็ให้ตัวอย่างที่ไม่เป็นประโยชน์โดยไม่มีคำอธิบายใด ๆ
ตอนแรก Xiaocai คิดว่าจุดประสงค์ของ {{สำหรับวัตถุ}} คือการสำรวจคุณสมบัติทั้งหมดของวัตถุ แต่ถ้าคุณคิดอย่างระมัดระวังฟังก์ชั่นนี้ {{อุปกรณ์ประกอบฉาก}} ได้ถูกนำไปใช้ ฟังก์ชั่นของแท็กอุปกรณ์ประกอบฉากคือการสำรวจคุณสมบัติทั้งหมดของวัตถุ จำนวนคุณสมบัติที่มีจำนวนครั้งจะวนรอบ แต่ละลูปจะมีคุณสมบัติที่ซ่อนอยู่สองประการ: คีย์, เสา, คีย์แสดงถึงชื่อแอตทริบิวต์และเสาแสดงถึงค่าแอตทริบิวต์ซึ่งสะดวกมากในการใช้งาน
ในความเป็นจริง {{สำหรับวัตถุ}} ไม่ใช่ลูปสามารถเข้าใจได้ว่าเป็นการป้อน (เข้าไป) นั่นคือการเข้าสู่สภาพแวดล้อมของวัตถุและการตั้งค่าบริบทปัจจุบันเป็นวัตถุคล้ายกับที่มีอยู่ใน handlebars.js
ตัวอย่างเช่น:
ข้อมูล:
คัดลอกรหัสดังนี้: {
"ชื่อ": "ทีม A",
"สมาชิก": [
-
"ชื่อ": "พีท",
"เมือง": "members_city",
"ที่อยู่": {
"เมือง": "address_city",
"City1": "address_city1",
"City2": "address_city2"
-
-
-
-
มาร์กอัปแม่แบบ:
คัดลอกรหัสดังนี้: {{สำหรับสมาชิก}}
{{สำหรับที่อยู่}}
<p>. {{: City}} </p>
{{/สำหรับ}}
{{/สำหรับ}}
ผลลัพธ์:
การคัดลอกรหัสมีดังนี้: address_city
จากผลลัพธ์เราจะเห็นได้ว่าแม้ว่ารายการสมาชิกจะมีแอตทริบิวต์เมืองเนื่องจากพวกเขาป้อนวัตถุที่ชี้ไปที่ที่อยู่ผ่าน {{สำหรับที่อยู่}}, {{: เมือง}} ได้รับโดยตรงจากที่อยู่
ในเวลาเดียวกันที่อยู่มีคุณสมบัติสามประการ แต่มีเพียงหนึ่งบรรทัดเท่านั้นที่จะส่งออกเป็นผลพิสูจน์ว่า {{สำหรับวัตถุ}} ไม่วนซ้ำเพียงแค่สลับสิ่งนี้
ฉันหวังว่าบทความนี้จะเป็นประโยชน์ต่อการเรียนรู้การเขียนโปรแกรม JSRender ของทุกคน