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.

2 « J'aime »

Je serais aussi intéressé par cela. As-tu déjà trouvé la réponse ? :grinning:

Les modèles bruts constituent une optimisation des performances. Seules certaines fonctionnalités de vue Ember sont disponibles ; c’est la suppression de fonctionnalités qui les rend plus rapides.

Par conséquent, nous utilisons ici un modèle différent pour l’extensibilité. Nous n’avons pas tout le cycle de vie d’Ember.

3 « J'aime »

Existe-t-il quelque chose de similaire à setupComponent(args, component) pour les outlets bruts également ? Qu’en est-il des propriétés calculées ? J’aimerais effectuer certains calculs basés sur les données du contexte. Comment puis-je procéder ? Je ne sais même pas si j’ai nommé correctement mon fichier .js.es6 associé. Devrais-je le nommer .raw.js.es6 ?

SetUpComponent not being called for topic list tags plugin outlet - #3 by net_deamon
D’accord, j’ai trouvé la solution : rouvrir le modèle Topic et y créer une propriété calculée :

https://github.com/paviliondev/discourse-events/blob/master/assets/javascripts/discourse/initializers/event-edits.js.es6#L74
Ensuite, elle peut être utilisée dans le modèle brut :
https://github.com/paviliondev/discourse-events/blob/master/assets/javascripts/discourse/connectors/topic-list-after-title/topic-list-event-rsvp.raw.hbs#L5

1 « J'aime »

J’ai la même question.

Est-il possible de « lier » un modèle brut avec du JavaScript correspondant, comme pour les composants réguliers, au sein d’un composant de thème ?

Je me trouve face à un cas d’usage assez complexe et je dois gérer des actions pour remonter des arguments le long de la chaîne des composants, depuis un modèle profondément intégré dans la liste des sujets.

Je remarque qu’il existe plusieurs fichiers .hbr avec apparemment des éléments de composants JavaScript correspondants dans le code source de Discourse, mais j’ai remarqué quelque chose d’étrange, par exemple :

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

Il semble donc y avoir plusieurs cas où existent des variantes .hbr et .hbs d’un composant spécifique ?

Ah, au moins avec topic-list-item, je vois que le changement est effectué ici :

Contenu du fichier hbs :

{{topicListItemContents}}

JavaScript de support :

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

Astucieux !

Cela suggère donc que les fichiers hbr n’ont pas de fichiers JavaScript sous-jacents, sauf s’ils sont pris en charge par ce genre de contournement ?

1 « J'aime »

Oui, je pense que c’est bien le cas. S’il existe une autre méthode, je ne l’ai jamais vue !

1 « J'aime »

Cet observateur n’est pas idéal, car nous cherchons à nous en éloigner au fur et à mesure que nous continuons à améliorer Ember. Je pense qu’une meilleure approche consiste à créer un helper et à y placer votre code JavaScript. Voici un exemple :
https://github.com/discourse/discourse-category-experts/blob/main/assets/javascripts/discourse/connectors/topic-list-after-title/category-experts-indicator.hbr

2 « J'aime »

Dans certains travaux récents, j’ai eu besoin qu’une partie de l’« arbre » de modèles puisse transmettre des données depuis un modèle feuille vers le haut en utilisant des actions de fermeture. J’ai donc remplacé certains fichiers .hbr par des fichiers .hbs pour le prendre en charge.

Ce travail est expérimental et je reconnais qu’il aura un impact sur les performances. Cependant, après plusieurs itérations de conception, je n’ai pas trouvé d’autre moyen de réaliser cela tout en restant « dans le cadre » du framework.

Peux-tu passer des fonctions à un helper et les appeler là-bas ? Je ne pense pas avoir essayé cela, mais je suppose que c’est possible.

1 « J'aime »

Plus précisément, je détermine les propriétés d’une image dans un composant feuille, puis je les stocke comme propriétés du grand-parent afin d’influencer un style qui doit persister au-delà du rendu actuel de la liste. Les données doivent absolument remonter. Si un helper peut y parvenir, cela semble être une bonne option si je reste bloqué avec l’approche actuelle, merci !

1 « J'aime »