Zugriff auf getrackte Variablen in VanillaJS?

Entwickler
1

Ich habe diesen Codeausschnitt:

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}}"
    }]
  }, "*");
});

Es ändert den iFrame, der sich in einem DModal befindet, um die Sprache und den Inhalt des Codes aufzunehmen. Es sagt mir jedoch, dass iFrame null ist, sodass addEventListener nicht hinzugefügt werden konnte.
Ich habe Folgendes versucht:

<template>
  <DButton @translatedLabel="Show Modal" @action={{this.showModal}} />

  {{#if this.modalIsVisible}}
    <DModal @title="Code Compiler" @closeModal={{this.hideModal}}>
      <p>Code: {{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>

Aber das hat auch nicht funktioniert. Gibt es eine Möglichkeit, dies zu tun?

Link zum Repository:

2

Es sieht so aus, als ob Sie in gjs arbeiten, sodass Sie einfach Glimmer-Funktionen verwenden können, anstatt zu versuchen, DOM-Rendering und Race Conditions zu umgehen. Fügen Sie den Glimmer-{{on}}-Modifikator mit dem iframe-Element hinzu und lassen Sie Ihre on loaded-Funktion darauf auslösen.

@action
onIframeLoaded() {
...
}

...

<iframe {{on "load" this.onIframeLoaded}}
2 „Gefällt mir“
3

Das… gibt es!? Wow, ich werde es versuchen.

4

Hmm… got this error:

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)

Code:

@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="Show Modal"
      @action={{this.showModal}}
    />

    {{#if this.modalIsVisible}}
      <DModal @title="Code Compiler" @closeModal={{this.hideModal}}>
        <p>Code: {{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, ich habe mein Beispiel vermasselt. Es sollte {{on \"load\" this.onIframeLoaded}} lauten, ohne Klammern, da es sich um einen Verweis auf eine Funktion handeln sollte.

Ich habe meine Antwort bearbeitet.

3 „Gefällt mir“
6

Hmm… es sagt Error: 74:13 error 'on' is not defined in ESLint. Und die Dokumentation erwähnt keinen Import, da es sich um einen Modifikator handelt.
Ich habe event als Parameter zu onIframeLoaded hinzugefügt, weil die Dokumentation das so gemacht hat.

7

Fügen Sie import { on } from \"@ember/modifier\"; hinzu und es sollte funktionieren.
Es ist eine gute Idee, sich den Discourse-Quellcode anzusehen. Es ist ein guter Ort, um mit vorhandenem Code zu lernen.

2 „Gefällt mir“
8

Siehe auch GitHub - discourse/all-the-plugins und GitHub - discourse/all-the-themes

3 „Gefällt mir“