كيفية تخصيص المسارات في المكون الإضافي ثم عرض صفحة مخصصة؟

كيف يمكنني تخصيص مسار (route) في المكون الإضافي (plugin) ثم عرض صفحة مخصصة؟

لقد اطلعت على هذا الموضوع: Developing Discourse Plugins - Part 5 - Add an Admin Interface - documentation / developer guide - Discourse Meta، ومكونات إضافية أخرى، لكنني فشلت.

المسارات المخصصة التي أنشأتها تُرجع بيانات JSON، بينما أريد عرض قالب Ember. هل هناك أي موضوع يشرح هذه المعرفة؟ شكرًا جزيلاً.

إذا كان هذا كل ما تريد القيام به، ألقِ نظرة على:

و:

لقد علقت هنا، وفيما يلي الخطوات المحددة:

لقد قمت بتعريف المسار في الملف plugins/q/config/routes.rb:

get "/hello" => "examples#hello"

المتحكم (Controller): plugins/q/app/controllers/quectel/examples_controller.rb

def hello
   render json: { hello: "world" }
end

الوصول الآن إلى: localhost:4200/q/hello، يعرض json

{"hello":"world"}

كيف يمكنني عرض قالب Ember عند الوصول إلى localhost:4200/q/hello؟

لقد وضعت إشارة مرجعية لهذا الموضوع منذ بعض الوقت لقراءته لاحقًا: Creating Routes in Discourse and Showing Data. لست متأكدًا مما إذا كان محدثًا، ولكنه قد يساعد على أي حال.

نعم، لقد اطلعت على هذا المنشور واتبعت الخطوات المذكورة فيه، ولكنها لم تنجح، ويظهر خطأ “الصفحة غير موجودة”. بعد ذلك، أصبحت حائراً.

حسنًا، من خلال دراسة الكود الخاص بـ plugins/discourse-subscriptions، تمكنت تقريبًا من تحقيق التأثير الذي أريده.

الوصول إلى /q/hello يعرض محتوى القالب المخصص ويجلب بيانات الواجهة الخلفية المخصصة.

فيما يلي الخطوات التي اتبعتها:

1. إنشاء ملف تعيين المسار الجديد plugins/quectel/assets/javascripts/discourse/quectel-route-map.js

export default function quectel() {
  this.route("q/hello"); // المسار الافتراضي هو /q/hello
};

2. إنشاء ملف المسار plugins/quectel/assets/javascripts/discourse/routes/q/hello.js

import Route from "@ember/routing/route";
import { ajax } from "discourse/lib/ajax";

export default class HelloRoute extends Route {
  model() {
    return ajax('/q/hello') // طلب واجهة الواجهة الخلفية لجلب البيانات
  }
}

3. إنشاء ملف القالب الأمامي plugins/quectel/assets/javascripts/discourse/templates/q/hello.gjs، لعرض البيانات

import QHello from '../../components/q-hello'

<template>
  <h1>q-hello</h1>
  {{!-- عرض المكون --}}
  <QHello />
  {{!-- عرض بيانات النموذج --}}
  <div>{{@model.hello}}</div>
</template>

4. إنشاء ملف وحدة تحكم الواجهة الخلفية plugins/quectel/app/controllers/quectel/examples_controller.rb

# frozen_string_literal: true

module ::Quectel
  class ExamplesController < ::ApplicationController
    requires_plugin PLUGIN_NAME

    def hello
      render json: { hello: "hello 2333" }
    end
  end
end

5. تعريف مسار الواجهة الخلفية plugins/quectel/config/routes.rb

# frozen_string_literal: true

Quectel::Engine.routes.draw do
  get "/hello" => "examples#hello"
end

Discourse::Application.routes.draw { mount ::Quectel::Engine, at: "q" }

عند الوصول إلى /q/hello، سترى العرض التالي:

image1912×932 47.2 KB