Soy muy bueno en administración de sistemas. No me va mal haciendo cosas en Rails. Pero con JavaScript, Ember y CSS, soy como un hombre de las cavernas.
En un plugin que cambia quién puede enviar mensajes privados (PM), estoy intentando agregar un botón en la página de perfil cuando el usuario no tiene permiso para enviar un PM. Puedo agregar texto justo donde quiero poniendo cosas en assets/javascripts/discourse/templates/connectors/user-summary-stat/my-clever-name.hbs. (¡Hubo muchas celebraciones!).
Me gustaría usar eso en my-clever-name.hbs, pero esa variable no está definida.
Creo que tal vez necesito crear un archivo my-clever-name.js.es6 en el mismo directorio que mi archivo hbs e incluir… algo, y/o agregar algún código que defina esa variable para que pueda acceder a ella. Sin embargo, he releído la guía para desarrolladores varias veces y también he intentado imitar el código de algunos plugins que parecen estar haciendo lo mismo, pero no veo exactamente cómo hacerlo.
¡He oído a la gente decir que EmberJS es “un lenguaje en sí mismo”!
Lo que necesitas es una Propiedad Computada:
Aunque la sintaxis del código fuente de Discourse es un poco diferente, al igual que las importaciones, lo mejor es buscar un ejemplo. Aquí tienes un fragmento de mi código:
¿Entonces crearé assets/javascripts/discourse/components/my-plugin.js.es6 y extenderé… algo…? Parece que debería haber una forma de simplemente “activar” esas mismas variables a las que tiene acceso la otra plantilla que estoy extendiendo. ¡AH! ¿Quizás extender esa cosa en mi componente haría que esas variables estuvieran disponibles para mí?
¿Debería rendirme, retroceder y dedicar una semana al tutorial de Ember?
Esto configura una propiedad computada llamada ‘fullName’ que se actualiza cada vez que cambian ‘firstName’ o ‘lastName’. Se convierte en el valor de retorno.
import discourseComputed from "discourse-common/utils/decorators";
import User from "discourse/controllers/user";
export default Ember.Component.extend(User, {
classNames: ["restrict-pms"],
myFunThing: "this is text in my fun thing",
@discourseComputed("myvalue")
someThing(myvalue) {
return true;
}
});
Template.registerHelper("log", function(something){
console.log(something);
});
Creo que lo que pregunto, lo cual podría no tener sentido, es qué puedo poner en assets/javascripts/discoures/templates/connectors/user-profile-controls/add-link-to-subscription.hbs para poder acceder a myFunThing o myvalue?
El código anterior está en assets/javascript/discourse/components/user-private-messages.js.es6.
Y quiero poder usar {{myFunThing}} y/o {{myvalue}} en assets/javascripts/discourse/templates/connectors/user-profile-controls/add-link-to-subscription.hbs, pero están sin definir.
Creo que uno de esos archivos está en el lugar incorrecto (veo que otro texto en el archivo hbs anterior se muestra en /u/username/summary, solo que sin myFunThing), o que estoy importando la clase incorrecta y/o estoy extendiendo el componente equivocado.
Lo siento, Jay, estoy un poco ocupado, pero lo que puedes hacer es simplemente conectar tu componente en el archivo HBS dentro del conector HBS, por ejemplo:
{{my-component}}
(agrega los argumentos según sea necesario)
Luego buscará my-component.hbs en templates/components y /components.
Alternativamente, deberías poder establecer la propiedad en el archivo JS dentro del directorio del conector, pero para mi estilo prefiero el primer enfoque.