Acesse uma variável fora do escopo de um Handlebars.js a cada loop


188

Eu tenho um modelo handlebars.js, assim:

{{externalValue}}

<select name="test">
    {{#each myCollection}}
       <option value="{{id}}">{{title}} {{externalValue}}</option>
    {{/each}}
</select>

E esta é a saída gerada:

myExternalValue

<select name="test">
       <option value="1">First element </option>
       <option value="2">Second element </option>
       <option value="3">Third element </option>
</select>

Como esperado, eu posso acessar os campos ide titlede todos os elementos myCollectionpara gerar meu select. E fora do select, minha externalValuevariável é impressa corretamente ("myExternalValue").

Infelizmente, nos textos das opções, o externalValuevalor nunca é impresso.

Minha pergunta é: como acessar uma variável fora do escopo do handlebars.js, cada uma dentro do loop?

Respostas:


454

Experimentar

<option value="{{id}}">{{title}} {{../externalValue}}</option>

O ../segmento de caminho faz referência ao escopo do modelo pai que deve ser o que você deseja.


10
Se os futuros leitores ainda estiverem tendo problemas como eu, dê uma olhada no comentário para esta resposta aqui. Levei um tempo depois de ver esta resposta para ver essa. Pode ser necessário usar ../repetidamente, dependendo de quantos escopos estiverem do valor que você possui.
precisa

10
Estou louco ou esse tipo de informação valiosa não pode ser encontrada nos documentos do guidão ???
Jesse19

1
@spliter não este trabalho no guiador brasa .. ele parece estar funcionando
kweku360

1
Não faço ideia @ kweku360. Isso funciona para barras de barras normais. Pode ser que Ember está usando versão personalizada do guidão onde essa funcionalidade é implementada com outro meio
spliter

1
Obrigado cara, isso funciona perfeitamente também com a Foundation 6 Panini.
Marco

13

Ou você pode usar o caminho absoluto como este:

<option value="{{id}}">{{title}} {{@root.user.path.to.externalValue}}</option>

1

Vi muitos links com o 404 para documentação sobre esse tópico.

Eu o atualizo com este, está funcionando em 1º de abril de 2020 :

https://handlebarsjs.com/guide/expressions.html#path-expressions

Alguns ajudantes como #with e #each permitem mergulhar em objetos aninhados. Quando você inclui ../ segmentos no seu caminho, o Guiador volta ao contexto pai.

    {{#each people}}
    {{../prefix}} {{firstname}} 
    {{/each}}

Mesmo que o nome seja impresso enquanto estiver no contexto de um comentário, ele ainda pode voltar ao contexto principal (o objeto raiz) para recuperar o prefixo.

AVISO

O valor exato que ../ resolverá varia de acordo com o auxiliar que está chamando o bloco. Usar ../ é necessário apenas quando o contexto muda. Filhos de ajudantes como {{#each}} exigiriam o uso de ../ enquanto filhos de ajudantes como {{#if}} não.

{{permalink}}
{{#each comments}}
  {{../permalink}}

  {{#if title}}
    {{../permalink}}
  {{/if}}
{{/each}}

Neste exemplo, todas as opções acima referenciam o mesmo valor de prefixo, embora estejam localizadas em blocos diferentes. Esse comportamento é novo no guidão 4, as notas de versão discutem o comportamento anterior e o plano de migração.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.