Mi dispiace, sono un principiante in questo
Ho usato ask discourse per chiedere:
in un tema voglio renderizzare il primo post di due argomenti sopra l’elenco degli argomenti nell’outlet discovery-list-container-top
Mi ha dato diverse versioni che ai miei occhi sembravano funzionare. Tutte stanno generando un errore nell’anteprima. Chiedo a discourse:
come potrei inserire il codice di esempio nella scheda JS invece che nei file?
Mi ha dato questa versione
import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
class FirstPosts extends Component {
@tracked posts = [];
constructor() {
super(...arguments);
this.loadPosts();
}
async loadPosts() {
let topicIds = [123, 456]; // cambia con i tuoi ID argomento
let posts = [];
for (let id of topicIds) {
let res = await fetch(`/t/${id}.json`);
let data = await res.json();
if (data.post_stream && data.post_stream.posts.length > 0) {
posts.push(data.post_stream.posts[0]);
}
}
this.posts = posts;
}
static template = <template>
{{#each this.posts as |post|}}
<div class="first-post-preview">
<h4>{{post.topic_title}}</h4>
{{{post.cooked}}}
</div>
{{/each}}
</template>;
}
export default apiInitializer("0.11.1", api => {
api.renderInOutlet("discovery-list-container-top", FirstPosts);
});
e quando ho incollato il codice di errore in ask discourse mi ha dato questa versione
import { apiInitializer } from "discourse/lib/api";
// Global data store (hacky, but works for the JS tab)
window.firstPostsData = [];
fetch("/t/123.json")
.then(r => r.json())
.then(data => window.firstPostsData.push(data.post_stream.posts[0]));
fetch("/t/456.json")
.then(r => r.json())
.then(data => window.firstPostsData.push(data.post_stream.posts[0]));
export default apiInitializer(api => {
api.renderInOutlet("discovery-list-container-top",
<template>
{{#each (theme-prefix "firstPostsData" window=true) as |post|}}
<div class="first-post-preview">
<h4>{{post.topic_title}}</h4>
{{{post.cooked}}}
</div>
{{/each}}
</template>
);
});
Qualcuno può dirmi cosa sto sbagliando?
l’errore nella console era:
Compile error: SyntaxError: /theme-4/discourse/api-initializers/theme-initializer.gjs:
questo è ciò che è apparso nell’anteprima
Grazie
1 Mi Piace
L’ho modificato e questo sembra funzionare:
import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
class FirstPosts extends Component {
@tracked posts = [];
constructor() {
super(...arguments);
this.loadPosts();
}
async loadPosts() {
let topicIds = [123, 456]; // cambia con i tuoi ID argomento
let posts = [];
for (let id of topicIds) {
const res = await fetch(`/t/${id}.json`);
const data = await res.json();
if (data.post_stream && data.post_stream.posts.length > 0) {
posts.push(data.post_stream.posts[0]);
}
}
this.posts = posts;
}
<template>
{{#each this.posts as |post|}}
<div class="first-post-preview">
<h4>{{post.topic_title}}</h4>
{{{post.cooked}}}
</div>
{{/each}}
</template>;
}
export default apiInitializer((api) => {
api.renderInOutlet("discovery-list-container-top", FirstPosts);
});
1 Mi Piace
Grazie Nate! Sto cercando di capire cosa hai cambiato
Il tuo codice sembra corrispondere alla mia prima versione
Hai sostituito let con const nel ciclo for
è corretto?
La versione con ask discourse genera un errore
for (let id of topicIds) {
let res = await fetch(`/t/${id}.json`);
let data = await res.json();
if (data.post_stream && data.post_stream.posts.length > 0) {
posts.push(data.post_stream.posts[0]);
}
}
La versione di Nate funziona
for (let id of topicIds) {
const res = await fetch(`/t/${id}.json`);
const data = await res.json();
if (data.post_stream && data.post_stream.posts.length > 0) {
posts.push(data.post_stream.posts[0]);
}
}
Qualcuno può spiegare cosa c’è di sbagliato? Perché let non funziona e const sì?
Grazie ancora Nate
1 Mi Piace
Ho provato let e il risultato è stato lo stesso. È solo che normalmente userei const quando uso fetch() o ajax().
Credo che l’errore provenga dalla riga static template = . Con essa ottengo:
[THEME 10283 'Pokemon Theme'] Error: connector component has no associated template. Ensure the template is colocated or authored with gjs.
at h (plugin-connectors.js:35:11)
at eY.renderInOutlet (plugin-api.gjs:1116:5)
at todo.gjs:43:7
at eH (plugin-api.gjs:3363:10)
at Object.initialize (api.js:21:14)
at i.initialize (app.js:265:28)
at index.js:379:19
at e.each (index.js:183:7)
at e.walk (index.js:112:10)
at e.each (index.js:59:20)
at e.topsort (index.js:65:10)
at iL._runInitializer (index.js:392:11)
at iL.runInstanceInitializers (index.js:377:10)
at l._bootSync (instance.js:116:22)
at iL.didBecomeReady (index.js:784:18)
at invoke (index.js:262:14)
at m.flush (index.js:180:11)
at g.flush (index.js:334:19)
at z._end (index.js:762:32)
at _boundAutorunEnd (index.js:499:12)
E se uso direttamente \u003ctemplate\u003e, non ci sono errori.
3 Mi Piace
Ho cancellato sbadatamente la versione che stavo testando e ora non riesco a eseguire la vostra versione più recente
theme-initializer.gjs:18 Uncaught (in promise) ReferenceError: constid is not defined
at n.loadPosts (theme-initializer.gjs:18:10)
at new n (theme-initializer.gjs:12:10)
at h.createComponent (index.js:259:12)
at $.create (index.js:419:28)
at Object.evaluate (index.js:985:23)
at Object.evaluate (index.js:103:106)
at tr.evaluateSyscall (index.js:2873:20)
at tr.evaluateInner (index.js:2852:64)
at tr.evaluateOuter (index.js:2849:10)
at tH.next (index.js:4167:45)
at tH._execute (index.js:4157:21)
at tH.execute (index.js:4133:41)
at tq.sync (index.js:4194:120)
at tz.render (index-BCp6wOJU.js:4636:43)
at index-BCp6wOJU.js:4934:16
at eX (index.js:2414:7)
at tG._renderRoots (index-BCp6wOJU.js:4914:7)
at tG._renderRootsTransaction (index-BCp6wOJU.js:4962:12)
at tG._renderRoot (index-BCp6wOJU.js:4904:10)
at tG._appendDefinition (index-BCp6wOJU.js:4828:10)
at tG.appendOutletView (index-BCp6wOJU.js:4818:10)
at invoke (index.js:264:14)
at m.flush (index.js:180:11)
at g.flush (index.js:334:19)
at z._end (index.js:762:32)
at _boundAutorunEnd (index.js:499:12)
Per favore aiutatemi a risolverlo.
Sì, let e const sono effettivamente identici qui, quindi non è questo il problema.
Credo che tu possa includere template con quella sintassi solo in un file .gjs autonomo, poiché quel suffisso segnala all’interprete di precompilarlo.
Spostarsi su GitHub è comunque un’ottima idea.
2 Mi Piace
Grazie per questo consiglio, ci sto provando ora. Essere arrivato fin qui mi ha dato incoraggiamento. Il codice di Nate qui sopra funziona effettivamente e mette i due argomenti in cima. Inizierò un nuovo argomento con la mia idea per il tema e cercherò di documentare ciò che imparo. ask.discourse.org è assolutamente fantastico!
2 Mi Piace
