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.

También me interesaría. ¿Ya encontraste la respuesta? :grinning:

Las plantillas raw son una optimización de rendimiento. Solo existen características parciales de la vista de Ember; la eliminación de características es lo que las hace más rápidas.

Por lo tanto, utilizamos un patrón diferente aquí para la extensibilidad. No tenemos el ciclo de vida completo de Ember.

¿Existe algo similar a setupComponent(args, component) que funcione también con los outlets raw? ¿Qué hay de las propiedades computadas? Me gustaría realizar algunos cálculos basados en los datos del contexto. ¿Cómo puedo hacerlo? Ni siquiera sé si nombré correctamente mi archivo .js.es6 adjunto. ¿Debería llamarlo .raw.js.es6?

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

Vale, encontré la solución: reabrir el modelo Topic y crear una propiedad computada allí:

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

Después, se puede usar en la plantilla raw:

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

Tengo la misma pregunta.

¿Es posible “respaldar” una plantilla cruda con el JavaScript correspondiente, como en los Componentes regulares, dentro de un Componente de Tema?

Tengo un caso de uso bastante desafiante y necesito gestionar acciones para pasar argumentos de vuelta a lo largo de la cadena de componentes, desde una plantilla profundamente incrustada dentro de la lista de temas.

He notado que hay varios archivos .hbr con elementos de Componente de JavaScript aparentemente correspondientes en el código fuente de Discourse, pero observé algo extraño, por ejemplo:

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 haber, por lo tanto, varias instancias donde existen versiones .hbr y .hbs de un Componente específico.

Ah, al menos con topic-list-item veo que el cambio se realiza aquí:

Contenido del archivo hbs:

{{topicListItemContents}}

JavaScript de respaldo:

  @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!

Esto sugiere que los archivos hbr no tienen archivos JavaScript subyacentes, ¿a menos que se respalden con este tipo de solución alternativa?

Sí, creo que es así. ¡Si hay otra forma, no la he visto!

Ese observador no es ideal, ya que estamos tratando de alejarnos de ellos mientras continuamos mejorando Ember. Creo que una mejor opción es crear un helper y colocar allí tu JS. Aquí tienes un ejemplo:

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

En algunos trabajos recientes, he necesitado que parte del “árbol” de plantillas pueda transmitir datos desde una plantilla hoja hacia arriba mediante acciones de cierre, por lo que he cambiado algunas hbr a hbs para soportar esto.

El trabajo es experimental y agradezco que esto tendrá un impacto en el rendimiento, pero tras iterar el diseño varias veces, no pude encontrar una forma alternativa de hacerlo manteniéndome “dentro del marco”.

¿No puedes pasar funciones a un helper y llamarlas allí? No creo que lo haya probado, pero imagino que sí es posible.

Específicamente, estoy determinando las propiedades de una imagen en un componente hoja y luego las almaceno como propiedades del abuelo para influir en el estilo que debe persistir más allá del renderizado actual de la lista. Los datos definitivamente deben subir. Si un helper puede lograrlo, suena como una buena opción si me quedo atascado con el enfoque actual, ¡gracias!