เข้าถึงคุณสมบัติของพาเรนต์ด้วยลูป 'แต่ละ' Handlebars

พิจารณาข้อมูลที่เรียบง่ายดังต่อไปนี้:

var viewData = {
    itemSize: 20,
    items: [
        'Zimbabwe', 'dog', 'falafel'
    ]
};

และแม่แบบ Handlebars:

{{#each items}}
    <div style="font-size:{{itemSize}}px">{{this}}</div>
{{/each}}

สิ่งนี้จะไม่ทำงานเพราะภายในeachลูปขอบเขตของพาเรนต์ไม่สามารถเข้าถึงได้ - อย่างน้อยก็ไม่ได้ในวิธีที่ฉันได้ลอง ฉันหวังว่าจะมีวิธีการทำเช่นนี้!

มีสองวิธีที่ถูกต้องในการบรรลุเป้าหมายนี้

อ้างถึงขอบเขตพาเรนต์ด้วย ../

ด้วยการ../ต่อท้ายชื่อคุณสมบัติคุณสามารถอ้างอิงขอบเขตหลักได้

{{#each items}}
    <div style="font-size:{{../itemSize}}px">{{this}}</div>
    {{#if this.items.someKey}}
       <div style="font-size:{{../../itemSize}}px">{{this}}</div>  
    {{/if}}
{{/each}}

../คุณสามารถไปได้หลายระดับผ่านการทำซ้ำ ../../keyยกตัวอย่างเช่นที่จะไปขึ้นสองระดับการใช้งาน

สำหรับข้อมูลเพิ่มเติมโปรดดูที่เอกสาร Handlebars บนเส้นทาง

อ้างถึงขอบเขตรูทด้วย @root

โดยการเพิ่ม@rootไปยังเส้นทางคุณสมบัติคุณสามารถเลื่อนลงมาจากขอบเขตสูงสุด (ดังแสดงในคำตอบของโปรแกรมตัวนับ )

สำหรับข้อมูลเพิ่มเติมโปรดดูที่เอกสาร Handlebars กับตัวแปร

เมธอดใหม่ใช้การจัดรูปแบบดอทเครื่องหมายสแลชจะถูกคัดค้าน ( http://handlebarsjs.com/expressions.html )

ดังนั้นวิธีการที่แท้จริงในการเข้าถึงองค์ประกอบผู้ปกครองมีดังต่อไปนี้:

@root.grandfather.father.element
@root.father.element

ในตัวอย่างเฉพาะของคุณคุณจะใช้:

{{#each items}}
 <div style="font-size:{{@root.viewData.itemSize}}px">{{this}}</div>
{{/each}}

อีกวิธีหนึ่งจากเอกสารอย่างเป็นทางการ ( http://handlebarsjs.com/builtin_helpers.html ) กำลังใช้นามแฝง

ผู้ช่วยแต่ละคนยังสนับสนุนพารามิเตอร์บล็อกซึ่งอนุญาตให้มีการอ้างอิงแบบมีชื่อที่ใดก็ได้ในบล็อก

{{#each array as |value key|}}  
 {{#each child as |childValue childKey|}}
     {{key}} - {{childKey}}. {{childValue}}   
 {{/each}} 
{{/each}} 

จะสร้างตัวแปรคีย์และค่าที่เด็ก ๆ สามารถเข้าถึงได้โดยไม่จำเป็นต้องอ้างอิงตัวแปรที่มีความลึก ในตัวอย่างด้านบน {{key}}> เหมือนกันกับ {{@ .. / key}} แต่ในหลายกรณีสามารถอ่านได้มากขึ้น