# Accedere alle variabili tracciate in VanillaJS?

**URL:** https://meta.discourse.org/t/access-tracked-variables-in-vanillajs/354313
**Category:** Development
**Created:** [25 Febbraio 2025, 5:17am UTC](https://meta.discourse.org/t/access-tracked-variables-in-vanillajs/354313 "2025-02-25T05:17:21Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [25 Febbraio 2025, 5:17am UTC](https://meta.discourse.org/t/access-tracked-variables-in-vanillajs/354313/1 "2025-02-25T05:17:21Z")

</div>

Ho questo pezzo di codice:

```js
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:

```html
<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:

> **[GitHub - NateDhaliwal/Discourse-OneCompiler-Code-Runner](https://github.com/NateDhaliwal/Discourse-OneCompiler-Code-Runner)**
>
> Contribute to NateDhaliwal/Discourse-OneCompiler-Code-Runner development by creating an account on GitHub.

---

<div class="post-metadata">

### Author: ![Alteras](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alteras/32/179824_2.png) [@Alteras](https://meta.discourse.org/u/Alteras)
#### Post date: [25 Febbraio 2025, 6:52am UTC](https://meta.discourse.org/t/access-tracked-variables-in-vanillajs/354313/2 "2025-02-25T06:52:31Z")

</div>

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}}`](https://guides.emberjs.com/v5.5.0/upgrading/current-edition/action-on-and-fn/#toc_the-on-modifier) con l’elemento iframe e fai in modo che la tua funzione on loaded venga attivata su di esso.

```js
@action
onIframeLoaded() {
...
}

...

<iframe {{on "load" this.onIframeLoaded}}

```

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [25 Febbraio 2025, 6:56am UTC](https://meta.discourse.org/t/access-tracked-variables-in-vanillajs/354313/3 "2025-02-25T06:56:38Z")

</div>

Esiste!? Wow, ci proverò.

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [25 Febbraio 2025, 7:03am UTC](https://meta.discourse.org/t/access-tracked-variables-in-vanillajs/354313/4 "2025-02-25T07:03:27Z")

</div>

> [@Alteras](#):
>
> `{{on "load" this.onIframeLoaded()}}`

Hmm… ho ricevuto questo errore:

```plaintext
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:

```js
@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>

```

---

<div class="post-metadata">

### Author: ![Alteras](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alteras/32/179824_2.png) [@Alteras](https://meta.discourse.org/u/Alteras)
#### Post date: [25 Febbraio 2025, 7:08am UTC](https://meta.discourse.org/t/access-tracked-variables-in-vanillajs/354313/5 "2025-02-25T07:08:03Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [25 Febbraio 2025, 11:37am UTC](https://meta.discourse.org/t/access-tracked-variables-in-vanillajs/354313/6 "2025-02-25T11:37:04Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [25 Febbraio 2025, 12:58pm UTC](https://meta.discourse.org/t/access-tracked-variables-in-vanillajs/354313/7 "2025-02-25T12:58:14Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [25 Febbraio 2025, 5:41pm UTC](https://meta.discourse.org/t/access-tracked-variables-in-vanillajs/354313/8 "2025-02-25T17:41:17Z")

</div>

> [@Arkshine](#):
>
> È una buona idea dare un’occhiata al codice sorgente di Discourse. È un buon posto per imparare con il codice esistente.

Vedi anche [GitHub - discourse/all-the-plugins](https://github.com/discourse/all-the-plugins) e [GitHub - discourse/all-the-themes](https://github.com/discourse/all-the-themes)