عرض منشور فوق حاوية discovery-list-container-top Outlet

مطور
1

أنا مبتدئ في هذا، آسف

لقد استخدمت ask discourse للسؤال:
في قالب، أريد عرض أول مشاركة من موضوعين فوق قائمة المواضيع في منفذ discovery-list-container-top

لقد أعطاني عدة إصدارات بدت لي وكأنها يجب أن تعمل. جميعها تسبب خطأ في المعاينة. أسأل discourse:
كيف يمكنني وضع الكود النموذجي في علامة التبويب JS بدلاً من الملفات؟

لقد أعطاني هذا الإصدار

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);
});

وعندما نسخت الكود الذي به خطأ إلى ask discourse، أعطاني هذا الإصدار

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>
  );
});

هل يمكن لأحد أن يخبرني ما الذي أفعله بشكل خاطئ؟

كان الخطأ في وحدة التحكم:

Compile error: SyntaxError: /theme-4/discourse/api-initializers/theme-initializer.gjs:

هذا ما ظهر في المعاينة

image
image1023×102 14.6 KB

شكراً جزيلاً

إعجاب واحد (1)
2

لقد قمت بتعديله ويبدو أن هذا يعمل:

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]; // غيّر إلى معرفات الموضوعات الخاصة بك
    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);
});

image
image1166×893 221 KB

إعجاب واحد (1)
3

شكرًا لك نيت! أحاول معرفة ما الذي قمت بتغييره

يبدو أن الكود الخاص بك يطابق نسختي الأولى

لقد استبدلت let بـ const في حلقة التكرار for

هل هذا صحيح؟

إصدار ask discourse يرمي خطأ

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

إصدار نيت يعمل

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

هل يمكن لأي شخص أن يشرح ما هو الخطأ؟ لماذا لا يعمل Let ويعمل const؟

شكرًا مرة أخرى نيت

إعجاب واحد (1)
4

لقد جربت let وكانت النتيجة هي نفسها. الأمر هو أنني عادةً ما أستخدم const عند استخدام fetch() أو ajax().

أعتقد أن الخطأ يأتي من السطر static template =. باستخدامه، أحصل على:

[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)

وإذا استخدمت <template> مباشرة، فلا يوجد خطأ.

3 إعجابات
5

لقد حذفت عن جهل الإصدار الذي كنت أختبره والآن لا يمكنني تشغيل أحدث إصدار لديك

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)

أرجو المساعدة في إصلاح ذلك.

6

نعم، let و const متطابقان فعليًا هنا لذا فهذه ليست المشكلة.

7

أعتقد أنه يمكنك فقط تضمين القوالب بهذا التركيب في ملف ‎.gjs مستقل لأن هذا اللاحقة تشير إلى المفسر لكي يقوم بترجمتها مسبقًا.

الانتقال إلى GitHub هو فكرة جيدة على أي حال.

إعجابَين (2)
8

شكرًا لك على هذه النصيحة، أحاول القيام بذلك الآن. وصولي إلى ما وصلت إليه أعطاني التشجيع. الكود الخاص بـ Nate أعلاه يعمل بالفعل ويضع الموضوعين في الأعلى. سأبدأ موضوعًا جديدًا بفكرة الثيم الخاص بي وأحاول توثيق ما أتعلمه. ask.discourse.org مذهل للغاية!

إعجابَين (2)