Ich habe Ask Discourse gefragt:
In einem Theme möchte ich den ersten Beitrag von zwei Themen oberhalb der Themenliste im discovery-list-container-top Outlet rendern.
Es hat mir mehrere Versionen gegeben, die meiner Meinung nach funktionieren sollten. Alle werfen einen Fehler in der Vorschau. Ich frage Ask Discourse:
Wie würde ich den Beispielcode in den JS-Tab anstatt in Dateien einfügen?
Es gab mir diese Version:
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]; // change to your topic IDs
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);
});
Und als ich den Fehlercode in Ask Discourse eingefügt habe, gab es mir diese Version:
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>
);
});
Danke Nate! Ich versuche herauszufinden, was du geändert hast
Dein Code scheint mit meiner ersten Version übereinzustimmen
Du hast let durch const in der for-Schleife ersetzt
ist das korrekt?
Die Discourse-Version wirft einen Fehler
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]);
}
}
Nates Version läuft
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]);
}
}
Kann mir jemand erklären, was falsch ist? Warum let nicht funktioniert und const schon?
Ich habe let versucht und das Ergebnis war dasselbe. Es ist nur so, dass ich normalerweise const verwenden würde, wenn ich fetch() oder ajax() verwende.
Ich glaube, der Fehler kommt von der Zeile static template = . Damit erhalte ich:
[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)
Und wenn ich einfach direkt <template> verwende, gibt es keinen Fehler. Ich glaube nicht, dass die Verwendung von static template hier gültig ist, daher funktioniert die direkte Verwendung des Template-Tags.
Ich habe dummerweise die Version gelöscht, die ich getestet habe, und jetzt kann ich Ihre neueste Version nicht zum Laufen bringen
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)
Ich glaube, Sie können Vorlagen mit dieser Syntax nur in einer eigenständigen .gjs-Datei einschließen, da diese Endung dem Interpreter signalisiert, sie vorab zu kompilieren.
Ein Umzug zu GitHub ist ohnehin eine sehr gute Idee.
Vielen Dank für diesen Rat, ich versuche das jetzt umzusetzen. So weit zu kommen hat mir Mut gemacht. Nates Code oben funktioniert tatsächlich und platziert die beiden Themen ganz oben. Ich werde ein neues Thema mit meiner Themenidee starten und versuchen zu dokumentieren, was ich lerne. ask.discourse.org ist absolut erstaunlich!
