Hinzufügen eines Buttons mit Onclick

Unterstützung
1

Mir entgeht hier offensichtlich etwas.
Ich versuche, einen Button hinzuzufügen und ein onclick-Ereignis zu verknüpfen.

In der HTML-Datei einer Komponente habe ich folgendes hinzugefügt:

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

Und im /-Head habe ich folgendes hinzugefügt:

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

Aber es wird nichts ausgelöst.

Bin ich so dumm?

F.

2

Denken Sie daran, dass Discourse eine Ember.js-Anwendung ist. Sie müssen sich daher an die Ember-Regeln für JavaScript-Entwicklung halten.

Ich glaube, jQuery wird bald auch vollständig aus Ember entfernt, was bedeutet, dass das $-Zeichen nicht gut aussieht.

3

Danke @codinghorror,

lässt sich das mit einer Komponente umsetzen oder benötige ich ein Plugin?

4

Hallo zusammen,

ich habe am Ende ein Widget im /head-Bereich meiner Komponente erstellt und es dann in der Handlebar-Vorlage hinzugefügt.

let currentLocale = I18n.currentLocale();
I18n.translations[currentLocale].js.custom_modal_title = “Mein benutzerdefiniertes Modal”;

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","Je mehr wir sind, desto besser funktioniert es. Teile es mit deinen Freunden, es ist kostenlos!"));
    contents.push(h("div.hc-column","Melde dich an und veröffentliche deine Hilfsanfrage"));
    contents.push(h("div.hc-column","Möchtest du helfen? Suche nach Wisper in deiner Stadt"));
    let row1 = h("div.row-cont", contents);
    let h1 = h('div.top-spot',h('h1','myWisper ist ein Ort, an dem man Hilfe anbieten und suchen kann'));
    let inner = [];
    let bottoni = [];
    bottoni.push(h("div.hc-column",this.attach('modal-button','Einladen')))
    bottoni.push(h("div.hc-column",this.attach('modal-button','+ Neuer Wisper')))
    bottoni.push(h("div.hc-column",this.attach('modal-button','Helfen')))
    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 ist ein Ort, an dem man Hilfe anbieten und suchen kann.'));
    let inner = [];
    let bottoni = [];
    bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','Einladen')))
    bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','+ Neuer Wisper')))
    bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','Helfen')))
    let row2 = h("div.row-cont", bottoni);
    inner.push(h("h1.mobile-header","myWisper ist ein Ort, an dem man Hilfe anbieten und suchen kann"));
    inner.push(row2);
    return h("div.hc-banner-mobile",inner);
  },
});
</script>