Como contornar DOMContentLoaded na navegação?

Dev
1

Temos uma função JS que é executada no DOMContentLoaded, document.addEventListener(“DOMContentLoaded”, NOSSAFUNÇÃO).

Funciona bem quando você atualiza o navegador, mas nunca aparece quando você navega pelo site. Presumo que seja porque o Discourse carrega o DOM apenas uma vez e o restante é tratado com navegação do lado do cliente, como uma SPA. Então, estou me perguntando, como podemos executar a função em uma mudança de navegação no próprio Discourse? Costumava haver maneiras fáceis de fazer isso através da API de plugins, mas essas APIs foram depreciadas e não as vejo mais usadas em nenhum componente. Existe uma maneira fácil de fazer isso ainda? Ou precisamos criar um componente inteiro apenas para executar algum JavaScript em uma mudança de navegação? Obrigado.

2

Olá,

Se você estiver procurando por um evento chamado quando a página carrega, existe o api.onPageChange.

api.onPageChange((url, title) => {
   console.log('a página mudou para: ' + url + ' e título ' + title);
});

Se você estiver procurando por outra coisa, pode elaborar o que deseja alcançar? Poderíamos dar uma resposta mais precisa.

A propósito, você tem muita documentação que pode achar útil: Developer Guides - Discourse Meta.

3 curtidas
3

Hmmm… Não tenho certeza se isso garante que o conteúdo do DOM foi carregado. Acredito que ele é acionado na mudança de Rota, que é muito mais cedo.

Você precisaria considerar anexar um Componente a um Plugin Outlet e disparar no modificador didInsert se o carregamento do DOM for importante.

Se apenas a mudança de Rota for importante, então sim, onPageChange deve resolver :+1:

1 curtida
4

Você pode estar certo! :thinking:

O onPageChange é chamado no próximo runloop, então acho que ele ainda será chamado após o DOMContentLoaded na maioria das situações, mas não posso garantir.

Vejo usos que dependem do onPageChange e fazem coisas com elementos DOM diretamente. De onde é disparado o evento routeDidChange aliás (EDIT: é do ember: RouterService | 6.7.0 | Ember API Documentation)?

Concordo com o modificador didInsert, muito legal!

1 curtida
5

Obrigado. Li extensivamente a documentação e, de acordo com meus comentários e um acompanhamento de um membro do Discourse, a API de plugin é legada e será descontinuada em breve. Portanto, embora seu código possa funcionar agora, ele quebrará em breve, acredito que em futuras atualizações. É por isso que estou procurando uma solução melhor. Parece excessivo criar um componente Glimmer para isso, então eu esperava que houvesse outro evento que talvez pudéssemos usar.

6

Não acredito que isso esteja correto.

foi atualizado na semana passada.

O que está descontinuado são:

  • API de widgets
  • Templates brutos
  • Sobrescrita de templates em geral
3 curtidas
7

Obrigado por esclarecer! Então é apenas a API do widget. Ok, tentarei as sugestões de API acima primeiro.

3 curtidas
8

Isso é meio que uma bênção :sweat_smile:, Glimmer é muito mais amigável para desenvolvedores

2 curtidas
9

Aliás, testamos com api.OnPageChange e funciona bem. Ainda não encontramos uma instância em que o conteúdo do DOM não estivesse disponível ao chamar OnPageChange, então parece que ele é disparado após DomContentLoaded. Mas não posso ter 100% de certeza. Obrigado pela sua ajuda nisso.

3 curtidas
10

Bom. Apenas esteja ciente de que o tempo não é garantido. Mas fico feliz que funcione para o seu caso de uso!

1 curtida
11

Você pode explicar melhor o que isso significa? O que é o modificador didInsert? Estou disparando no decorateCookedElement. Obrigado.

1 curtida
13
1 curtida
14

A documentação é o caminho a seguir, como apontado por Robert; você também pode ver uma tonelada de exemplos no repositório: Code search results · GitHub

1 curtida
15

Ah, ok, então este é um recurso do Ember e não relacionado ao Discourse? A única parte no código que está realmente relacionada ao “Discourse” seria o pluginoutlet?

1 curtida
16

Sim, faz parte do padrão Glimmer

pluginOutlets são apenas Components especiais projetados para montar outros Components:

2 curtidas