Accedere alle variabili tracciate in VanillaJS?

Sviluppatore
1

Ho questo pezzo di codice:

let iFrame = document.getElementById('oc-editor');
iFrame.addEventListener('load', function() {
  iFrame.contentWindow.postMessage({
    eventType: 'populateCode',
    language: "{{this.codeLang}}",
    files: [{
      "name": "file.{{this.codeLang}}",
      "content": "{{this.codeLang}}"
    }]
  }, "*");
});

Cambia l’iframe che si trova in un DModal per includere il linguaggio e il contenuto del codice. Tuttavia, mi dice che iFrame è null, quindi non è stato possibile aggiungere addEventListener ad esso.
Ho provato questo:

<template>
  <DButton @translatedLabel="Mostra Modale" @action={{this.showModal}} />

  {{#if this.modalIsVisible}}
    <DModal @title="Compilatore di Codice" @closeModal={{this.hideModal}}>
      <p>Codice: {{this.getCode}}</p>
      <iframe
       frameBorder="0"
       height="450px"
       src="https://onecompiler.com/embed/{{this.codeLang}}"
       width="100%"
       id="oc-editor"
       title="OneCompiler Code Editor"
       listenToEvents="true">
      </iframe>
      <script>
        let iFrame = document.getElementById('oc-editor');
        iFrame.addEventListener('load', function() {
          iFrame.contentWindow.postMessage({
            eventType: 'populateCode',
            language: "{{this.codeLang}}",
            files: [{
              "name": "file.{{this.codeLang}}",
              "content": "{{this.codeLang}}"
            }]
          }, "*");
        });
      </script>
    </DModal>
  {{/if}}
</template>

Ma anche quello non ha funzionato. C’è un modo per farlo?

Link al repository:

2

Sembra che tu stia lavorando in gjs, quindi puoi semplicemente usare le funzioni glimmer invece di cercare di aggirare il rendering del DOM e le race condition. Aggiungi il modificatore glimmer {{on}} con l’elemento iframe e fai in modo che la tua funzione on loaded venga attivata su di esso.

@action
onIframeLoaded() {
...
}

...

<iframe {{on "load" this.onIframeLoaded}}
2 Mi Piace
3

Esiste!? Wow, ci proverò.

4

Hmm… ho ricevuto questo errore:

Compile error: Error: /discourse/theme-9718/discourse/components/show-onecompiler: Parse error on line 18:
...   {{on "load" this.onIframeLoaded()}}>
-----------------------^
Expecting 'ID', got 'INVALID' (discourse/components/show-onecompiler.gjs)

Codice:

@action
  onIframeLoaded() {
    let iFrame = document.getElementById('oc-editor');
    iFrame.contentWindow.postMessage({
      eventType: 'populateCode',
      language: "{{this.codeLang}}",
      files: [
        {
          "name": "file.{{this.codeLang}}",
          "content": "{{this.codeLang}}"
        }
      ]
    }, "*");
    return;
  }


  <template>
    <DButton
      @translatedLabel="Mostra Modale"
      @action={{this.showModal}}
    />

    {{#if this.modalIsVisible}}
      <DModal @title="Code Compiler" @closeModal={{this.hideModal}}>
        <p>Codice: {{this.getCode}}</p>
        <iframe
          frameBorder="0"
          height="450px"
          src="https://onecompiler.com/embed/{{this.codeLang}}"
          width="100%"
          id="oc-editor"
          title="OneCompiler Code Editor"
          listenToEvents="true"
          {{on "load" this.onIframeLoaded()}}
        >
        </iframe>
      </DModal>
    {{/if}}
  </template>
5

Ah, ho sbagliato il mio esempio. Dovrebbe essere {{on \"load\" this.onIframeLoaded}}, senza parentesi, poiché dovrebbe essere un riferimento a una funzione.

Ho modificato la mia risposta.

3 Mi Piace
6

Hmm… dice che Error: 74:13 error 'on' is not defined in ESLint. E la documentazione non menziona un’importazione perché è un modificatore.
Ho aggiunto event come parametro a onIframeLoaded perché la documentazione lo faceva.

7

Aggiungi import { on } from "@ember/modifier"; e dovrebbe funzionare.
È una buona idea dare un’occhiata al codice sorgente di Discourse. È un buon posto per imparare con il codice esistente.

2 Mi Piace
8

Vedi anche GitHub - discourse/all-the-plugins e GitHub - discourse/all-the-themes

3 Mi Piace