Как проверить «string === string» в шаблоне?

Разработка
1

В моем плагине я хочу использовать оператор if в шаблоне для проверки, совпадает ли строка с определенным значением.

Например:

{{#each groups as |group|}}
  {{#if group.name === "AwesomeName"}}
      <div>Совпадение найдено!</div>
  {{/if}}
{{/each}}

Как это сделать в Discourse?

Я понимаю, что прямое использование {{if}} не работает в Ember/Handlebars. Похоже, мне нужно зарегистрировать хелпер. Что-то вроде этого:

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>Совпадение найдено!</div>
 {{/eq}}
{{/each}}

Это не работает. (Ошибок не выдается.)

Я попробовал решение здесь, где используется “makeBoundHelper”, но это тоже не сработало — в этом случае я получаю ошибку, что “makeBoundHelper” не является функцией.

Мне просто нужно реализовать условие if для проверки совпадения строки с значением. Как это сделать?

2

Вы хотите использовать Computed Properties - The Object Model - Ember Guides

Однако обратите внимание на исходный код Discourse, чтобы понять их особый стиль написания кода.

3

Вычисляемые свойства интересны, но я не вижу связи с тем, на чём я сейчас сосредоточен.

В моём примере ключевым свойством является group.name, и я хочу в шаблоне проверить, совпадает ли это свойство со значением “AwesomeName”. Не уверен, как вычисляемые свойства помогут избежать необходимости использовать какой-то особый тип оператора {{if}} в шаблоне, который я пока не смог понять.

4

Шаблонизатор Handlebars поддерживает только базовую булеву логику. Вы можете проверять свойство на истинность.

Для выполнения более сложных операций логику необходимо реализовать в файле Ember JS, связанном с шаблоном.

Например, если у вас есть шаблон по пути templates/components/my-component.hbs, вам нужно использовать файл components/my-component.js для вычислений.

В этом файле вы можете сделать что-то вроде следующего:

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 — это просто имя функции, но оно может быть любым.

Затем в шаблоне вы можете сделать что-то вроде следующего:

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

Это подключает вычисляемое свойство из файла JS и отображает содержимое блока #if только в том случае, если property возвращает true.

5

Спасибо за это — это многое проясняет.

Пока ещё не удалось заставить это работать, отчасти потому, что я не нахожу примеров использования вычисляемых свойств для подобных операций.

В моём случае, в плагине, я вношу изменения в шаблон индекса групп. То есть в файл: plugin/assets/javascripts/discourse/groups/index.hbs (я просто вставил туда весь код индекса групп и добавил изменения поверх него.)

Вы имеете в виду, что JS-файл с вычисляемым свойством должен находиться в созданном мной файле: plugin/assets/javascripts/discourse/groups/index.js? Или я могу просто добавить этот код в инициализатор?

Это моя лучшая попытка реализовать то, о чём вы говорите — так ли это было задумано:

js:

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

hbs:

 {{#if property}}
    <div>Да, совпадение есть!</div>
 {{/if}}

Или вы имели в виду, что мне следует буквально указать общие значения, такие как “string1” и “string2”, в @discourseComputed, а затем изменить шаблон на {{#if property group.name "Amazing_Name"}}? (Только таким образом я мог бы учесть, что каждое значение динамично в шаблоне.)

Ни один из подходов пока не работает как надо.

Спасибо за вашу помощь.

6

Вам удалось заставить это работать? Мне бы очень хотелось увидеть подробный пример того, как это сделать (что именно добавить, в какой файл и в какое место файла, если это имеет значение).

7

Мне самому так и не удалось заставить это работать, и я был вынужден переключиться на другие задачи. Казалось бессмысленным тратить так много времени на то, что обычно является базовым упражнением по программированию. В моём случае, вероятно, дело было в нескольких ошибках синтаксиса здесь и там, но я так и не нашёл полностью рабочую реализацию. Также я был бы признателен за полностью рабочий пример того, как выполнить проверку if string === string.