Añadir un botón con Onclick

Soporte
1

Claramente me estoy perdiendo algo aquí.
Estoy intentando agregar un botón y adjuntar un evento onclick.

En el HTML de un componente agregué:

<button id="button_test" class="bottone">Prova</button>

y en el /head agregué:

$('#button_test').on('click', moreDetails);
function moreDetails(e){
console.log(`Escuchando: ${e.target.value}`);
}

Pero no está activando nada.

¿Soy tan tonto?
F.

2

Recuerda que Discourse es una aplicación de Ember.js, por lo que debes seguir las reglas de Ember para la codificación en JavaScript.

Creo que jQuery pronto será eliminado por completo de Ember también, por lo que el uso de $ no es una buena señal.

3

Gracias @codinghorror,

¿se puede lograr esto con un componente o necesito un plugin?

4

Hola a todos,

Al final creé un widget en la sección /head de mi componente y luego lo agregué en la plantilla de Handlebars.

let currentLocale = I18n.currentLocale();
I18n.translations[currentLocale].js.custom_modal_title = “Mi modal personalizado”;

const showModal = require("discourse/lib/show-modal").default;
const h = require("virtual-dom").h;

api.createWidget("modal-button", {
  tagName: "button.btn.btn-primary",

  html(arg) {
    return arg;
  },

  click(arg) {
      if(arg.target.innerText=="+ Nuovo Wisper") {
        $('#create-topic').click();
      } else if(arg.target.innerText=="Aiuta") {
          window.location.replace("/c/supporto/11");
      } else {
          window.location.replace("/t/invita-amici-a-mywisper/26");
      }
  }
});

api.createWidget("banner", {
  tagName: "div.wrap",
  html() {
    let contents = [];
    contents.push(h("div.hc-column","Cuántos más seamos, mejor funcionará. ¡Compártelo con tus amigos, es gratis!"));
    contents.push(h("div.hc-column","Inicia sesión y publica tu solicitud de ayuda"));
    contents.push(h("div.hc-column","¿Quieres ayudar? Busca los Wisper en tu ciudad"));
    let row1 = h("div.row-cont", contents);
    let h1 = h('div.top-spot',h('h1','myWisper es un lugar para ofrecer y buscar ayuda'));
    let inner = [];
    let bottoni = [];
    bottoni.push(h("div.hc-column",this.attach('modal-button','Invita')))
    bottoni.push(h("div.hc-column",this.attach('modal-button','+ Nuovo Wisper')))
    bottoni.push(h("div.hc-column",this.attach('modal-button','Ayuda')))
    let row2 = h("div.row-cont", bottoni);
    inner.push(h1,row1,row2);
    return h("div.hc-banner",inner);
  },
});

api.createWidget("banner_mobile", {
  tagName: "div.wrap",
  html() {
    let h1 = h('div.top-spot',h('h1','myWisper es un lugar para ofrecer y pedir ayuda.'));
    let inner = [];
    let bottoni = [];
    bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','Invita')))
    bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','+ Nuovo Wisper')))
    bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','Ayuda')))
    let row2 = h("div.row-cont", bottoni);
    inner.push(h("h1.mobile-header","myWisper es un lugar para ofrecer y pedir ayuda"));
    inner.push(row2);
    return h("div.hc-banner-mobile",inner);
  },
});
</script>