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

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.

Eu também estaria interessado nisso. Você já encontrou a resposta? :grinning:

Modelos brutos são uma otimização de desempenho. Apenas recursos parciais de visualização do Ember existem; a remoção de recursos é o que os torna mais rápidos.

Por isso, usamos um padrão diferente aqui para extensibilidade. Não temos o ciclo de vida completo do Ember.

Existe algo semelhante a setupComponent(args, component) que também funcione com os outlets brutos? E quanto às propriedades computadas? Gostaria de fazer alguns cálculos com base nos dados no contexto. Como posso proceder? Nem sei se nomeei corretamente o meu arquivo .js.es6 de acompanhamento. Deveria chamá-lo de .raw.js.es6?

SetUpComponent not being called for topic list tags plugin outlet - #3 by net_deamon
Ok, encontrei a solução: reabra o modelo Topic e crie uma propriedade computada lá:

https://github.com/paviliondev/discourse-events/blob/master/assets/javascripts/discourse/initializers/event-edits.js.es6#L74
Depois, ela pode ser usada no template bruto:
https://github.com/paviliondev/discourse-events/blob/master/assets/javascripts/discourse/connectors/topic-list-after-title/topic-list-event-rsvp.raw.hbs#L5

Eu tenho a mesma pergunta.

É possível associar um template bruto com o JavaScript correspondente, como nos Componentes regulares, dentro de um Componente de Tema?

Tenho um caso de uso bastante desafiador e preciso gerenciar ações para passar argumentos de volta pela cadeia de componentes, a partir de um template profundamente embutido na lista de tópicos.

Notei que há vários arquivos .hbr com elementos de Componente JavaScript correspondentes na fonte do Discourse, mas observei algo estranho, por exemplo:

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

Parece haver vários casos, portanto, em que existem versões .hbr e .hbs de um Componente específico?

Ah, pelo menos com topic-list-item, vejo que a troca é feita aqui:

Conteúdo do arquivo hbs:

{{topicListItemContents}}

Javascript de suporte:

  @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;
        }
      });
    }
  },

Astuto!

Então isso sugere que arquivos hbr não possuem arquivos javascript subjacentes, a menos que sejam suportados por esse tipo de solução alternativa?

Sim, acredito que seja esse o caso. Se houver outra maneira, eu ainda não a vi!

Esse observador não é ideal, pois estamos tentando nos afastar deles à medida que continuamos a atualizar o Ember. Acredito que uma maneira melhor é criar um helper e colocar seu JS nele. Aqui está um exemplo
https://github.com/discourse/discourse-category-experts/blob/main/assets/javascripts/discourse/connectors/topic-list-after-title/category-experts-indicator.hbr

Em alguns trabalhos recentes, precisei que parte da “árvore” de templates fosse capaz de comunicar dados de um template folha usando ações de fechamento (closure actions), então alterei alguns hbr’s para hbs’s para dar suporte a isso.

O trabalho é experimental e reconheço que isso terá impacto no desempenho, mas após iterar o design algumas vezes, não consegui encontrar uma alternativa para fazer isso mantendo tudo “dentro do framework”.

Você não pode passar funções para um helper e chamá-las lá? Acredito que não tenha tentado isso, mas imagino que seja possível.

Especificamente, estou determinando propriedades de uma imagem em um componente folha e, em seguida, armazenando-as como propriedades do avô para influenciar a estilização que deve persistir além da renderização atual da lista. Os dados definitivamente precisam subir. Se um helper puder fazer isso, parece uma boa opção caso eu fique travado com a abordagem atual, obrigado!