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

Sviluppatore
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

Anch’io sarei interessato a questo. Hai già trovato la risposta? :grinning:

3

I template raw sono un’ottimizzazione delle prestazioni. Sono presenti solo alcune funzionalità parziali delle view di Ember; la rimozione delle funzionalità è ciò che le rende più veloci.

Pertanto, utilizziamo qui un modello diverso per l’estendibilità. Non abbiamo l’intero ciclo di vita di Ember.

4

Esiste qualcosa di simile a setupComponent(args, component) anche per gli outlet raw? E le proprietĂ  calcolate? Vorrei eseguire alcuni calcoli basati sui dati nel contesto. Come posso procedere? Non sono nemmeno sicuro di aver chiamato correttamente il mio file .js.es6 di accompagnamento. Dovrei chiamarlo .raw.js.es6?

SetUpComponent not being called for topic list tags plugin outlet - #3 by net_deamon
Ok, ho trovato la soluzione: riaprire il modello Topic e creare lĂŹ una proprietĂ  calcolata:

https://github.com/paviliondev/discourse-events/blob/master/assets/javascripts/discourse/initializers/event-edits.js.es6#L74
Successivamente può essere utilizzata nel template raw:
https://github.com/paviliondev/discourse-events/blob/master/assets/javascripts/discourse/connectors/topic-list-after-title/topic-list-event-rsvp.raw.hbs#L5

5

Ho la stessa domanda.

È possibile associare a un template raw il corrispondente JavaScript, come avviene per i Componenti normali, all’interno di un Componente di Tema?

Ho un caso d’uso piuttosto complesso e devo gestire le azioni per passare argomenti indietro lungo la catena dei componenti, partendo da un template profondamente annidato all’interno dell’elenco dei topic.

Ho notato che ci sono diversi file .hbr con apparentemente corrispondenti elementi Componente JavaScript nel codice sorgente di Discourse, ma ho osservato qualcosa di strano, ad esempio:

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

Sembra quindi esserci diverse istanze in cui esistono varianti .hbr e .hbs di uno stesso Componente?

6

Ah, almeno con topic-list-item vedo che lo switch viene fatto qui:

Contenuto del file hbs:

{{topicListItemContents}}

Javascript di supporto:

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

Subdolo!

Quindi questo suggerisce che i file hbs non hanno file javascript sottostanti, a meno che non siano supportati da questo tipo di soluzione alternativa?

7

Sì, credo che sia così. Se esiste un altro modo, non l’ho mai visto!

8

Quell’observer non è ideale, dato che stiamo cercando di allontanarcene mentre continuiamo a migliorare Ember. Penso che un approccio migliore sia creare un helper e inserire lì il tuo JS. Ecco un esempio
https://github.com/discourse/discourse-category-experts/blob/main/assets/javascripts/discourse/connectors/topic-list-after-title/category-experts-indicator.hbr

9

In alcuni lavori recenti, ho avuto bisogno che parte dell’albero dei template potesse comunicare dati da un template foglia verso l’alto utilizzando le closure actions, quindi ho convertito alcuni file .hbr in .hbs per supportare questa funzionalità.

Il lavoro è sperimentale e so che avrà un impatto sulle prestazioni, ma dopo aver iterato più volte sul design non sono riuscito a trovare un’alternativa per farlo mantenendo tutto “all’interno del framework”.

10

Non puoi passare funzioni a un helper e chiamarle lĂŹ? Non credo di averlo mai provato, ma immagino sia possibile farlo.

11

Nello specifico, sto determinando le proprietà di un’immagine in un componente foglia, per poi memorizzarle come proprietà del componente genitore per influenzare lo stile che deve persistere oltre il rendering corrente dell’elenco. I dati devono assolutamente essere passati verso l’alto. Se un helper può raggiungere questo obiettivo, sembra un’ottima opzione nel caso in cui mi trovassi in difficoltà con l’approccio attuale, grazie!