¿Cómo personalizar rutas en un plugin y renderizar una página personalizada?

En un plugin, ¿cómo puedo personalizar una ruta y luego renderizar una página personalizada?

He leído esta publicación: Desarrollar plugins de Discourse - Parte 5 - Añadir una interfaz de administrador - Documentación / Guía del desarrollador - Discourse Meta, y otros plugins, pero todos han fallado.

Mis rutas personalizadas están devolviendo datos JSON, pero lo que quiero es renderizar una plantilla de Ember. ¿Hay alguna publicación que explique este conocimiento? Muchas gracias.

Si eso es todo lo que quieres hacer, echa un vistazo a:

Y:

Actualmente estoy atascado aquí, estos son mis pasos específicos:

Definí la ruta en el archivo plugins/q/config/routes.rb:

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

Controlador: plugins/q/app/controllers/quectel/examples_controller.rb

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

Ahora al acceder a: localhost:4200/q/hello, devuelve el json:

{"hello":"world"}

¿Cómo puedo hacer que al acceder a localhost:4200/q/hello se renderice la plantilla de Ember?

Marqué este tema hace tiempo para leerlo más tarde: Creating Routes in Discourse and Showing Data. No estoy seguro de si está actualizado, pero tal vez aún ayude.

Sí, también vi esa publicación e hice los pasos de arriba, pero no funciona, aparece el error de “página no encontrada”. Entonces, me quedé perplejo.

ok, después de investigar el código de plugins/discourse-subscriptions, he implementado aproximadamente el efecto deseado.

Al acceder a /q/hello, se mostrará el contenido de la plantilla personalizada y se obtendrán los datos del backend personalizado.

A continuación se detallan mis pasos:

1. Crear un nuevo archivo de mapeo de rutas: plugins/quectel/assets/javascripts/discourse/quectel-route-map.js

export default function quectel() {
  this.route("q/hello"); // La ruta predeterminada es /q/hello
};

2. Crear el archivo de ruta: 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') // Solicitar la interfaz de backend para obtener datos
  }
}

3. Crear el archivo de plantilla frontend: plugins/quectel/assets/javascripts/discourse/templates/q/hello.gjs, para renderizar los datos

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

<template>
  <h1>q-hello</h1>
  {{!-- Renderizar componente --}}
  <QHello />
  {{!-- Renderizar datos del modelo --}}
  <div>{{@model.hello}}</div>
</template>

4. Crear el archivo del controlador backend: 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. Definir la ruta del backend: 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" }

Al acceder a /q/hello, verá la siguiente visualización:

image1912×932 47.2 KB