Acessar propriedades do pai com um loop 'cada' do guidão

204

Considere os seguintes dados simplificados:

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

E um modelo de guidão:

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

Isso não funcionará porque, dentro do eachloop, o escopo pai não está acessível - pelo menos não da maneira que eu tentei. Espero que haja uma maneira de fazer isso!

Drew Noakes
fonte

Respostas:

423

Existem duas maneiras válidas de conseguir isso.

Desreferencie o escopo pai com ../

Anexando ../ao nome da propriedade, você pode fazer referência ao escopo pai.

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

Você pode subir vários níveis repetindo o ../. Por exemplo, para subir dois níveis use ../../key.

Para mais informações, consulte a documentação do Guiador sobre caminhos .

Desreferencie o escopo raiz com @root

Anexando @rootao caminho da propriedade, você pode navegar para baixo no escopo mais alto (como mostrado na resposta do caballerog ).

Para obter mais informações, consulte a documentação do guiador sobre variáveis ​​@data .

Drew Noakes
fonte
101
Apenas uma observação sobre o uso de ../ para obter as propriedades dos pais. Se você tem uma instrução each com um #if aninhado, basta fazer ../ apenas leva você ao nível do #each. Então você tem que fazer ../../itemSize para voltar para o exterior pai do #each
TheStoneFox
1
Como posso obter essa funcionalidade no mecanismo de modelagem mustache.js?
Blushrt #
2
@blushrt você não. Isso é específico do guidão
19h
3
@TheTaxPayer você acabou de me salvar de uma imensa quantidade de dor de cabeça! balançar com as suas meias no :)
Peter P.
4
Que tal passar um valor #each nível superior em um ajudante
Oleg Belousov
60

O novo método está usando a notação de ponto, a notação de barra está obsoleta ( http://handlebarsjs.com/expressions.html ).

Portanto, o método real para acessar os elementos dos pais é o seguinte:

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

No seu exemplo específico, você usaria:

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

Outro método da documentação oficial ( http://handlebarsjs.com/builtin_helpers.html ) está usando o alias

Cada ajudante também suporta parâmetros de bloco, permitindo referências nomeadas em qualquer lugar do bloco.

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

Criará uma variável de chave e valor que as crianças podem acessar sem a necessidade de referências detalhadas a variáveis. No exemplo acima, {{key}}> é idêntico a {{@ .. / key}}, mas em muitos casos é mais legível.

caballerog
fonte
1
Subir um nível para mim funcionou usando "@ root.itemSize".
Sam Tyson