Come avere se "string === string" in template?

Sviluppatore
1

Nel mio plugin, vorrei avere un’istruzione if in un template che valuti se una stringa corrisponde a un valore.

Come questa:

{{#each groups as |group|}}
  {{#if group.name === "AwesomeName"}}
      <div>C'è una corrispondenza!</div>
  {{/if}}
{{/each}}

Come posso farlo in Discourse?

Capisco che usare direttamente {{if}} non funziona in Ember/Handlebars. Sembra che debba registrare un helper. Qualcosa del genere:

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>C'è una corrispondenza!</div>
 {{/eq}}
{{/each}}

Questo non funziona. (Non vengono forniti errori.)

Ho provato la soluzione qui, che cerca di usare “makeBoundHelper”, ma non funziona nemmeno per me: in quel caso ricevo errori riguardo al fatto che “makeBoundHelper” non è una funzione.

Voglio solo poter fare un’istruzione if per confrontare una stringa con un valore. Come si fa?

1 Mi Piace
2

Vuoi utilizzare Computed Properties - The Object Model - Ember Guides

Tuttavia, consulta il codice sorgente di Discourse per il loro specifico stile di codice.

2 Mi Piace
3

Le proprietà calcolate sono interessanti, ma non vedo il collegamento con ciò su cui mi sto concentrando qui.

Nel mio esempio, la proprietà chiave è group.name e voglio valutare nel template se tale proprietà corrisponde a “AwesomeName”. Non sono sicuro di come le proprietà calcolate possano evitare la necessità di utilizzare un particolare tipo di istruzione {{if}} nel template che non sono riuscito a capire.

4

I template Handlebars dispongono solo di una logica booleana rudimentale. Puoi eseguire controlli sui valori truthy di una proprietà.

Per gestire logiche più complesse, devi eseguire il calcolo nel file JS di Ember associato al template.

Ad esempio, se hai un template in templates/components/my-component.hbs, dovrai utilizzare il file JS components/my-component.js per effettuare il calcolo.

In quel file, potresti scrivere qualcosa di simile:

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 è solo il nome di una funzione, ma può essere qualsiasi nome.

Poi, nel template, potresti scrivere qualcosa di simile:

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

Questo importa la proprietà calcolata dal file JS e mostra il contenuto nel blocco #if solo se property restituisce true.

4 Mi Piace
5

Grazie per questo—mi aiuta a chiarire molte cose.

Non sono ancora riuscito a farlo funzionare del tutto, in parte perché non trovo esempi online sull’uso delle proprietà calcolate per questo tipo di operazione.

Nel mio caso, nel mio plugin, sto apportando la modifica nel template dell’indice dei gruppi. Quindi nel file: plugin/assets/javascripts/discourse/groups/index.hbs (ho inserito tutto il codice dell’indice dei gruppi lì e ho aggiunto le modifiche sopra di esso.)

Vuoi dire che il file JS della proprietà calcolata andrebbe in un file che creo chiamato: plugin/assets/javascripts/discourse/groups/index.js? Oppure posso inserire quel codice direttamente in un inizializzatore?

Questo è il mio miglior tentativo per implementare ciò di cui stai parlando—è questo quello che avevi in 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>Sì, c'è una corrispondenza!</div>
 {{/if}}

O intendevi che dovrei inserire letteralmente valori generici come “string1” e “string2” in @discourseComputed e poi modificare il template in {{#if property group.name "Amazing_Name"}}? (Solo in quel modo potrei gestire il fatto che ogni valore sia dinamico nel template.)

Non sono ancora riuscito a far funzionare completamente nessuno dei due approcci.

Grazie per il tuo aiuto.

2 Mi Piace
6

Sei riuscito a farlo funzionare? Vorrei un esempio dettagliato su come procedere (cosa aggiungere, in quale file e in quale punto del file, se rilevante).

1 Mi Piace
7

In realtà non sono mai riuscito a farlo funzionare e ho dovuto andare avanti. Sembrava assurdo perdere così tanto tempo su quello che normalmente sarebbe un esercizio di base di programmazione. Nel mio caso, penso che fosse probabilmente un po’ di sintassi errata qui e un po’ di sintassi errata là, ma non ho mai trovato esempi completi e funzionanti. Sarei anche grato per un esempio completo e funzionante su come fare un if string === string.

2 Mi Piace