Wie hat man if "string === string" in Template?

Entwickler
1

In meinem Plugin möchte ich eine if-Anweisung in einer Vorlage haben, die prüft, ob ein String mit einem Wert übereinstimmt.

So ähnlich:

{{#each groups as |group|}}
  {{#if group.name === "AwesomeName"}}
      <div>Es gibt eine Übereinstimmung!</div>
  {{/if}}
{{/each}}

Wie kann ich das in Discourse umsetzen?

Mir ist klar, dass ein direktes {{if}} in Ember/Handlebars nicht funktioniert. Es sieht so aus, als müsste ich einen Helper registrieren. Etwa so:

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>Es gibt eine Übereinstimmung!</div>
 {{/eq}}
{{/each}}

Das funktioniert jedoch nicht. (Es werden keine Fehlermeldungen ausgegeben.)

Ich habe die Lösung hier versucht, die „makeBoundHelper

1 „Gefällt mir“
2

Du möchtest Computed Properties - The Object Model - Ember Guides verwenden.

Schau dir jedoch den Quellcode von Discourse an, um deren speziellen Code-Stil zu verstehen.

2 „Gefällt mir“
3

Berechnete Eigenschaften sind interessant, aber ich sehe den Bezug zu meinem aktuellen Fokus nicht.

In meinem Beispiel ist die Schlüsseleigenschaft group.name, und ich möchte im Template prüfen, ob diese Eigenschaft mit „AwesomeName

4

Handlebars-Templates bieten nur rudimentäre boolesche Logik. Sie können prüfen, ob eine Eigenschaft truthy-Werte hat.

Für komplexere Logik müssen Sie die Berechnung in der Ember JS-Datei durchführen, die mit der Template verknüpft ist.

Angenommen, Sie haben eine Template unter templates/components/my-component.hbs. Dann müssten Sie die JS-Datei components/my-component.js verwenden, um die Berechnung durchzuführen.

In dieser Datei würden Sie etwas wie folgt machen:

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 ist lediglich der Name einer Funktion, könnte aber auch ein anderer Name sein.

Dann würden Sie in der Template etwas wie folgt machen:

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

Dadurch wird die berechnete Eigenschaft aus der JS-Datei geladen und der Inhalt im #if-Block nur dann angezeigt, wenn property true zurückgibt.

4 „Gefällt mir“
5

Danke dafür – das hilft sehr, vieles zu klären.

Ich habe es noch nicht ganz zum Laufen gebracht – unter anderem, weil ich dort draußen kaum Beispiele finde, wie man berechnete Eigenschaften für diese Art von Operation verwendet.

In meinem Fall ändere ich in meinem Plugin den Gruppenindex in der Vorlage. Also in der Datei: plugin/assets/javascripts/discourse/groups/index.hbs (Ich habe dort den gesamten Gruppenindex-Code eingefügt und meine Änderungen darauf aufgesetzt.)

Meinst du, dass das JS für die berechnete Eigenschaft in einer von mir erstellten Datei namens plugin/assets/javascripts/discourse/groups/index.js landen soll? Oder kann ich diesen Code einfach in einen Initialisierer einfügen?

Das ist mein bester Versuch, das umzusetzen, worüber du sprichst – ist das das, was du im Sinn hattest:

js:

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

hbs:

 {{#if property}}
    <div>Yep, es gibt einen Treffer!</div>
 {{/if}}

Oder meintest du, ich solle in @discourseComputed wörtlich allgemeine Werte wie “string1” und “string2” eingeben und dann die Vorlage zu {{#if property group.name "Amazing_Name"}} ändern? (Nur so könnte ich dafür sorgen, dass jeder Wert in der Vorlage dynamisch ist.)

Ich habe bisher keinen der beiden Ansätze vollständig zum Laufen bekommen.

Vielen Dank für deine Hilfe.

2 „Gefällt mir“
6

Hast du es geschafft, es zum Laufen zu bringen? Ich hätte gerne ein detailliertes Beispiel, wie das geht (welcher Inhalt, in welcher Datei und an welcher Stelle in der Datei, falls das relevant ist).

1 „Gefällt mir“
7

Ich habe das selbst tatsächlich nie zum Laufen gebracht und musste weitermachen. Es erschien mir albern, so viel Zeit mit etwas zu verbringen, was normalerweise eine grundlegende Programmieraufgabe wäre. In meinem Fall war es wahrscheinlich hier und dort ein bisschen falsche Syntax, aber ich habe nie vollständig funktionierende Beispiele gefunden. Ich wäre auch dankbar für ein vollständiges, funktionierendes Beispiel dafür, wie man if string === string macht.

2 „Gefällt mir“