บทความนี้อธิบาย JSRender สำหรับดัชนีดัชนีลูป แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
Jsredner และ JSViews (JSViews เป็น encapsulation เพิ่มเติมตาม JSrender) เรียกว่าเทมเพลต jQuery รุ่นต่อไปที่อยู่อย่างเป็นทางการ:
https://github.com/borismoore/jsrender;
https://github.com/borismoore/jsviews
ลูปเป็นส่วนสำคัญของเครื่องยนต์เทมเพลตและเมื่อพูดถึงลูปจะมีการแนะนำปัจจัยสำคัญ: การจัดทำดัชนี
ดัชนีที่เรียกว่าคือจำนวนลูป ผ่านดัชนีคุณสามารถรับลูปปัจจุบันได้กี่ครั้ง
หากผู้อ่านได้อ่านเอกสารอย่างเป็นทางการพวกเขาจะเห็นวิธีต่อไปนี้ในการรับดัชนี:
ข้อมูล:
คัดลอกรหัสดังนี้: {
ชื่อ: ["Maradona", "Pele", "Ronaldo", "Messi"]
-
มาร์กอัปแม่แบบ:
คัดลอกรหัสดังนี้: {{สำหรับชื่อ}}
<div>
<b> {{: #index+1}}. </b>
<span> {{: #data}} </span>
</div>
{{/สำหรับ}}
ผลลัพธ์:
คัดลอกรหัสดังต่อไปนี้: 1. Maradona
2. เปเล่
3. โรนัลโด้
4. เมสซี่
ดัชนีสามารถรับได้ในลูปโดย #index ตัวอักษรพิเศษซึ่งเทียบเท่ากับสิ่งนี้และในกรณีนี้แสดงถึงชื่อแต่ละชื่อ
ต่อไปให้ทำเคล็ดลับและตัวอย่างข้างต้น แต่คราวนี้ฉันหวังว่าจะแสดงชื่อที่ขึ้นต้นด้วย M:
ข้อมูล:
คัดลอกรหัสดังนี้: {
ชื่อ: ["Maradona", "Pele", "Ronaldo", "Messi"]
-
มาร์กอัปแม่แบบ:
คัดลอกรหัสดังนี้: {{สำหรับชื่อ}}
{{ถ้า #data.indexof ("m") == 0}}
<div>
<b> {{: #index+1}}. </b>
<span> {{: #data}} </span>
</div>
{{/ถ้า}}
{{/สำหรับ}}
ผลลัพธ์:
คัดลอกรหัสดังนี้: ไม่พร้อมใช้งาน (มุมมองซ้อน): ใช้ #GetIndex () 1 มาราโดนา
ไม่สามารถใช้งานได้ (มุมมองซ้อน): ใช้ #GetIndex () 1 เมสซี่
ฉันเพียงแค่เพิ่มการตัดสิน IF และมันรายงานข้อผิดพลาดจริง ๆ !
ปัญหาอยู่ใน #index ข้อความแสดงข้อผิดพลาดชัดเจนมาก คุณสามารถใช้ #getIndex () แทน #index
ลองใช้รหัสที่ถูกแทนที่:
ข้อมูล:
คัดลอกรหัสดังนี้: {
ชื่อ: ["Maradona", "Pele", "Ronaldo", "Messi"]
-
มาร์กอัปแม่แบบ:
คัดลอกรหัสดังนี้: {{สำหรับชื่อ}}
{{ถ้า #data.indexof ("m") == 0}}
<div>
<b> {{: #getIndex ()+1}}. </b>
<span> {{: #data}} </span>
</div>
{{/ถ้า}}
{{/สำหรับ}}
ผลลัพธ์:
คัดลอกรหัสดังต่อไปนี้: 1. Maradona
4. เมสซี่
ทำไมถึงเป็นเช่นนี้? พูดง่ายๆก็เป็นเพราะแม้ว่า {{ถ้า}} ไม่ได้สร้างขอบเขตข้อมูลปกติ แต่ก็รบกวนขอบเขตที่ซ่อนอยู่ นั่นคือ {{ถ้า}} จะไม่บล็อกการมองเห็นข้อมูลปกติ (ข้อมูลที่คุณส่งผ่าน) แต่จะรบกวนการมองเห็นข้อมูลที่ซ่อนอยู่ (#index, #Parent) นี่เป็นความเข้าใจที่เรียบง่ายและไม่จำเป็นต้องเข้าไปในนั้นเพราะนี่เป็นเพียงข้อบกพร่องของกรอบนี้ไม่ใช่มาตรฐาน
ดังนั้นบทความนี้ให้ข้อสรุปที่สำคัญแก่ผู้อ่าน: ลองใช้ #GetIndex () เพื่อรับดัชนีและหลีกเลี่ยงการใช้ #Index เว้นแต่แอปพลิเคชันของคุณจะง่ายพอ
ฉันหวังว่าบทความนี้จะเป็นประโยชน์ต่อการเรียนรู้ของ JSrender ของทุกคน