Como ter se "string === string" em um template?

Dev
1

No meu plugin, quero ter uma instrução if em um template que avalie se uma string corresponde a um valor.

Assim:

{{#each groups as |group|}}
  {{#if group.name === "AwesomeName"}}
      <div>Existe uma correspondência!</div>
  {{/if}}
{{/each}}

Como posso fazer isso no Discourse?

Entendo que usar diretamente {{if}} não funciona no Ember/Handlebars. Parece que preciso registrar um helper. Algo assim:

plugin/assets/javascripts/discourse/helpers/eq/js/es6

import { registerHelper } from 'discourse-common/lib/helpers';

registerHelper('eq', function(arg1, arg2) {
     if (arg1 === arg2) {
         return true
    } else {
       return false
    }
})

plugin/assets/javascripts/templates/components/my-component.hbs

{{#each groups as |group|}}
  {{#eq group.name "AwesomeName"}}
      <div>Existe uma correspondência!</div>
 {{/eq}}
{{/each}}

Isso não funciona. (Não há erros fornecidos.)

Tentei a solução aqui, que tenta usar “makeBoundHelper”, mas também não funcionou para mim — lá recebo erros dizendo que “makeBoundHelper” não é uma função.

Só quero conseguir fazer uma instrução if para comparar uma string com um valor. Como faço isso?

1 curtida
2

Você deseja usar Computed Properties - The Object Model - Ember Guides

No entanto, consulte o código-fonte do Discourse para verificar o estilo de código específico deles.

2 curtidas
3

Propriedades computadas são interessantes, mas não estou vendo a ligação com o que estou focado aqui.

No meu exemplo, a propriedade chave é group.name, e quero avaliar no template se essa propriedade corresponde a “AwesomeName”. Não tenho certeza de como as propriedades computadas contornariam a necessidade de usar um tipo específico de instrução {{if}} no template que ainda não consegui descobrir.

4

Os templates do Handlebars possuem apenas lógica booleana rudimentar. Você pode realizar verificações que avaliam se uma propriedade possui valores truthy.

Para realizar qualquer coisa mais complexa, é necessário executar a lógica no arquivo JS do Ember associado ao template.

Por exemplo, se você tem um template em templates/components/my-component.hbs, deverá usar o arquivo JS components/my-component.js para fazer o cálculo.

Nesse arquivo, você faria algo como:

import discourseComputed from "discourse-common/utils/decorators";
import Component from "@ember/component";

export default Component.extend({
  @discourseComputed("string1", "string2")
  property(string1, string2) {
    return string1 === string2;
  }
});

property é apenas o nome de uma função, mas pode ser qualquer nome.

Em seguida, no template, você faria algo como:

{{#if property}}
 blah blah...
{{/if}}

Isso importa a propriedade computada do arquivo JS e exibe o conteúdo no bloco #if apenas se property retornar true.

4 curtidas
5

Obrigado por isso—ajuda a esclarecer bastante.

Ainda não consegui fazer funcionar totalmente—em parte porque não estou encontrando exemplos por aí de uso de propriedades computadas para esse tipo de operação.

No meu caso, no meu plugin, estou fazendo a alteração no template de índice de grupos. Ou seja, no arquivo: plugin/assets/javascripts/discourse/groups/index.hbs (eu coloquei todo o código do índice de grupos lá e adicionei as alterações por cima dele.)

Você quer dizer que o arquivo JS da propriedade computada iria em um arquivo que eu criei chamado: plugin/assets/javascripts/discourse/groups/index.js? Ou posso apenas colocar esse código em um inicializador?

Esta é a minha melhor tentativa de implementar o que você está falando—é isso que você tinha em mente:

js:

export default Component.extend({
  @discourseComputed("group.name", "Amazing_Name")
  property(group.name, Amazing_Name) {
    return group.name === Amazing_Name
  }
})

hbs:

 {{#if property}}
    <div>Sim, há uma correspondência!</div>
 {{/if}}

Ou você quis dizer que eu deveria inserir literalmente valores genéricos como “string1” e “string2” em @discourseComputed, e então alterar o template para {{#if property group.name "Amazing_Name"}}? (Só dessa forma eu conseguiria considerar que cada valor é dinâmico no template.)

Ainda não consegui fazer nenhum dos dois métodos funcionar corretamente.

Obrigado pela sua ajuda.

2 curtidas
6

Você conseguiu fazer funcionar? Estou ansioso por um exemplo detalhado de como fazer isso (o que adicionar, em qual arquivo e onde no arquivo, se for relevante).

1 curtida
7

Na verdade, eu nunca consegui fazer isso funcionar e tive que seguir em frente. Parecia tolo gastar tanto tempo com o que normalmente seria um exercício básico de programação. No meu caso, acho que provavelmente era um pouco de sintaxe incorreta aqui e outra ali, mas nunca encontrei exemplos completos e funcionais. Também ficaria grato por um exemplo completo e funcional de como fazer um if string === string.

2 curtidas