Modernizzazione dei tag script inline per template e API JS

Sviluppatore
42

Ciao di nuovo, grazie mille per la risposta!

Questo è il codice deprecato funzionante che incollo nella sezione \u003chead\u003e di un componente tema. C’è anche del CSS di supporto, ma quello non è un problema qui.

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("post:after", helper => {
  const firstPost = helper.attrs.firstPost;
  const h = helper.h;
  if (firstPost) {
        let images = new Array();
        let goTo = new Array();
        
/////////////////////////////////
        let imageCount = 2;
        images[0]="/uploads/3213123123123213.jpg";
        goTo[0]="https://example1.com";
        images[1]="/uploads/djdsalklkjdsajsalkd.jpg";
        goTo[1]="https://example2.com";
/////////////////////////////////
        
        imageCount-=1;
        let randPick = Math.round(imageCount * Math.random());
        let theLink = goTo[randPick];
        let theImage = images[randPick];

    return h("div.p3-image", [
      h(
        "a.p3-image-link",
        { href: theLink,  target: "_blank" },
        h("img", { src: theImage})
      )
    ]);
  }
});
</script>

Ho continuato a cercare e a modificare frammenti di codice che facessero qualcosa di simile a ciò di cui ho bisogno con i metodi moderni, e questo è ciò che sono riuscito a far funzionare per ora, incollato nella scheda JS:

import Component from "@glimmer/component";
import { withPluginApi } from "discourse/lib/plugin-api";

function customizePost(api) {
  api.renderAfterWrapperOutlet(
    "post-article-content",
    class extends Component {
      static shouldRender(args) {
        return args.post?.post_number === 1;
      }

      <template>Hello is this working? Yes but CSS divs are needed...</template>
      
    }
  );
}

export default {
  name: "not-sure-if-I-need-this",
  initialize() {
    withPluginApi((api) => {
      customizePost(api);
    });
  }
};
43

Prova qualcosa come:

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.renderAfterWrapperOutlet(
    "post-article-content",
    class extends Component {
      @tracked imageSrc = "";
      @tracked imageHref = "";

      constructor() {
        super(...arguments)
        this.randomImageLink();
      }

      static shouldRender(args) {
        return args.post?.post_number === 1;
      }
      
      randomImageLink() {
        let images = new Array();
        let goTo = new Array();
        
        /////////////////////////////////
        let imageCount = 2;
        images[0]="/uploads/3213123123123213.jpg";
        goTo[0]="https://example1.com";
        images[1]="/uploads/djdsalklkjdsajsalkd.jpg";
        goTo[1]="https://example2.com";
        /////////////////////////////////
        
        imageCount-=1;
        let randPick = Math.round(imageCount * Math.random());
        this.imageSrc = goTo[randPick];
        this.imageHref = images[randPick];
      }

      <template>
        <div class="p3-image">
          <a href={{this.imageHref}} target="_blank">
            <img src={{this.imageSrc}} />
          </a>
        </div>
      </template>
    }
  );
});

Potrebbe essere necessario modificarlo leggermente, non l’ho testato completamente.

2 Mi Piace
44

Scusa per la mia risposta lenta, sono un po’ sommerso di lavoro di recente.

Molto bene!! Funziona, solo che questi due erano invertiti:

        this.imageSrc = images[randPick];
        this.imageHref = goTo[randPick];

Devo informarmi sulla cosa @tracked (non so nemmeno come chiamarla, variabili tracciate?) così come su quel metodo constructor. Inoltre, non capisco bene come e a che punto venga eseguito il metodo shouldRender.

Grazie mille per il tuo aiuto con questo, non avrei mai saputo usare quei metodi da solo.

2 Mi Piace
45

Puoi leggere sulle proprietà tracciate qui.

Credo che shouldRender venga eseguito proprio all’inizio, poiché decide se il template è visibile o meno.

Sono felice di aver potuto aiutare!

2 Mi Piace