What is the difference between raw.hbs handlerbar files and only .hbs handlerbar files?

Разработка
1

I noticied that few plugin outlet like topic-list-after-title require raw.hbs file
while other require only hbs file.

I did search in the handlebars documentation, but I could see anything as raw hbs file.

I checked in the discourse code, plugin outlet like topic-list-after-title are defined as

{{raw-plugin-outlet name="topic-list-after-title"}}

while other plugins are defined as

{{plugin-outlet name="composer-fields-below" args=(hash model=model)}}

Q1. Is there any reason why some plugin plugin are defined in above way ( raw-plugin-outlet) ?

Also I noticied that in the raw.hbs file, the setupcomponent is not called as explained in this link

Q2. Is it so? I had also asked similar question regarding this.

2

Мне тоже это интересно. Вы уже нашли ответ? :grinning:

3

Сырые шаблоны — это оптимизация производительности. Поддерживаются только частичные возможности представлений Ember; именно удаление функций делает их быстрее.

Поэтому здесь мы используем другой паттерн для расширяемости. У нас нет полного жизненного цикла Ember.

4

Существует ли что-то подобное setupComponent(args, component) для необработанных слотов (raw outlets)? А как насчет вычисляемых свойств? Я хотел бы выполнять некоторые вычисления на основе данных в контексте. Как мне это сделать? Я даже не уверен, правильно ли назвал свой сопутствующий файл .js.es6. Должен ли я назвать его .raw.js.es6?

SetUpComponent not being called for topic list tags plugin outlet - #3 by net_deamon

Хорошо, я нашел решение: переоткрыть модель Topic и создать там вычисляемое свойство:

https://github.com/paviliondev/discourse-events/blob/master/assets/javascripts/discourse/initializers/event-edits.js.es6#L74

После этого его можно использовать в необработанном шаблоне:

https://github.com/paviliondev/discourse-events/blob/master/assets/javascripts/discourse/connectors/topic-list-after-title/topic-list-event-rsvp.raw.hbs#L5

5

У меня тот же вопрос.

Возможно ли «подкрепить» шаблон (raw template) соответствующим JavaScript-кодом, как это делается для обычных компонентов, внутри компонента темы?

У меня довольно сложная задача: мне нужно управлять действиями для передачи аргументов обратно вверх по цепочке компонентов из глубоко вложенного шаблона в списке тем.

Я заметил, что в исходном коде Discourse есть несколько файлов .hbr, которые, судя по всему, соответствуют элементам JavaScript-компонентов, но обратил внимание на кое-что странное, например:

merefield@development:~/discourse$ find . -type f -name "flat-button.*"
./app/assets/javascripts/discourse/app/templates/flat-button.hbr
./app/assets/javascripts/discourse/app/templates/components/flat-button.hbs
./app/assets/javascripts/discourse/app/components/flat-button.js
merefield@development:~/discourse$ find . -type f -name "topic-list-item.*"
./app/assets/javascripts/discourse/app/templates/mobile/list/topic-list-item.hbr
./app/assets/javascripts/discourse/app/templates/components/topic-list-item.hbs
./app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
./app/assets/javascripts/discourse/app/components/topic-list-item.js
merefield@development:~/discourse$ find . -type f -name "topic-post-badges.*"
./app/assets/javascripts/discourse/app/templates/components/topic-post-badges.hbs
./app/assets/javascripts/discourse/app/templates/topic-post-badges.hbr
./app/assets/javascripts/discourse/app/components/topic-post-badges.js

Получается, есть несколько случаев, когда для одного и того же компонента существуют варианты файлов .hbr и .hbs?

6

Ах, по крайней мере в topic-list-item я вижу, что здесь происходит переключение:

Содержимое hbs-файла:

{{topicListItemContents}}

Вспомогательный JavaScript:

  @observes("topic.pinned")
  renderTopicListItem() {
    const template = findRawTemplate("list/topic-list-item");
    if (template) {
      this.set(
        "topicListItemContents",
        template(this, RUNTIME_OPTIONS).htmlSafe()
      );
      schedule("afterRender", () => {
        if (this.selected && this.selected.includes(this.topic)) {
          this.element.querySelector("input.bulk-select").checked = true;
        }
      });
    }
  },

Хитро!

Так что это предполагает, что у hbr-файлов нет лежащих в основе JavaScript-файлов, если они не поддерживаются подобным обходным решением?

7

Да, я считаю, что это так. Если есть другой способ, я о нём не слышал!

8

Такой наблюдатель не идеален, поскольку мы стремимся отказаться от них по мере продолжения обновления Ember. Я думаю, что лучшим решением будет создание хелпера и размещение вашего JS-кода там. Вот пример:

https://github.com/discourse/discourse-category-experts/blob/main/assets/javascripts/discourse/connectors/topic-list-after-title/category-experts-indicator.hbr

9

В некоторых недавних работах мне потребовалось, чтобы часть «дерева» шаблонов могла передавать данные от листового шаблона вверх с помощью замыкающих действий, поэтому я заменил часть файлов hbr на hbs для поддержки этого.

Эта работа носит экспериментальный характер, и я понимаю, что это повлияет на производительность, но после нескольких итераций дизайна я не смог найти альтернативный способ реализации этого, оставаясь «в рамках фреймворка».

10

Разве нельзя передать функции в хелпер и вызвать их там? Я не думаю, что пробовал это, но, полагаю, так можно сделать.

11

В частности, я определяю свойства изображения в дочернем компоненте, а затем сохраняю их как свойства дедушки, чтобы повлиять на стилизацию, которая должна сохраняться за пределами текущего рендеринга списка. Данные обязательно должны передаваться наверх. Если с помощью вспомогательного компонента это можно реализовать, это звучит как хороший вариант, если я застряну с текущим подходом, спасибо!