Các thuộc tính truy cập của cha mẹ với vòng lặp 'mỗi' của Tay cầm

Xem xét các dữ liệu đơn giản sau:

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

Và một mẫu Tay cầm:

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

Điều này sẽ không hoạt động vì trong eachvòng lặp, phạm vi cha mẹ không thể truy cập được - ít nhất là không theo bất kỳ cách nào tôi đã thử. Tôi hy vọng rằng có một cách để làm điều này mặc dù!

Có hai cách hợp lệ để đạt được điều này.

Dereference phạm vi cha mẹ với ../

Bằng cách thêm vào ../tên thuộc tính, bạn có thể tham chiếu phạm vi cha.

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

Bạn có thể tăng nhiều cấp độ thông qua việc lặp lại ../. Ví dụ, để đi lên hai cấp sử dụng ../../key.

Để biết thêm thông tin, xem tài liệu Tay cầm trên đường dẫn .

Dereference phạm vi gốc với @root

Bằng cách thêm vào @rootđường dẫn thuộc tính, bạn có thể điều hướng xuống từ phạm vi trên cùng (như thể hiện trong câu trả lời của caballerog ).

Để biết thêm thông tin, hãy xem tài liệu về Tay cầm trên các biến @data .

Phương pháp mới đang sử dụng ký hiệu dấu chấm, ký hiệu gạch chéo không được dùng nữa ( http://handlebarsjs.com/expressions.html ).

Vì vậy, phương pháp thực tế để truy cập vào các phần tử cha mẹ như sau:

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

Trong ví dụ cụ thể của bạn, bạn sẽ sử dụng:

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

Một phương pháp khác từ tài liệu chính thức ( http://handlebarsjs.com/builtin_helpers.html ) là sử dụng bí danh

Mỗi trình trợ giúp cũng hỗ trợ các tham số khối, cho phép các tham chiếu được đặt tên ở bất kỳ đâu trong khối.

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

Sẽ tạo một biến khóa và giá trị mà trẻ em có thể truy cập mà không cần tham chiếu biến sâu. Trong ví dụ trên, {{key}}> giống hệt với {{@ .. / key}} nhưng trong nhiều trường hợp thì dễ đọc hơn.