Onclick 속성을 가진 버튼 추가하기

제품 지원
1

여기서 뭔가 중요한 걸 놓치고 있는 것 같습니다.
버튼을 추가하고 onclick 이벤트를 연결하려고 합니다.

컴포넌트의 HTML에 다음을 추가했습니다:

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

그리고 /head에 다음을 추가했습니다:

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

하지만 아무것도 트리거되지 않습니다.

제가 이 정도인 건가요?

F.

2

Discourse는 Ember.js 앱이므로 JavaScript 코딩 시 Ember 규칙을 따르셔야 합니다.

jQuery가 곧 Ember에서도 완전히 제거될 것으로 보이며, 따라서 $는 좋은 선택이 아닙니다.

3

@codinghorror님, 감사합니다.

이걸 컴포넌트로 구현할 수 있나요, 아니면 플러그인이 필요한가요?

4

모두 안녕하세요,

결국 컴포넌트의 /head 섹션에서 위젯을 생성한 후 Handlebar 템플릿에 추가했습니다.

let currentLocale = I18n.currentLocale();
I18n.translations[currentLocale].js.custom_modal_title = “My custom 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","Più siamo più funziona. Condividi con i tuoi amici, è gratis!"));
    contents.push(h("div.hc-column","Fai login e pubblica la tua richiesta di aiuto"));
    contents.push(h("div.hc-column","Vuoi aiutare? Cerca i Wisper nella tua città"));
    let row1 = h("div.row-cont", contents);
    let h1 = h('div.top-spot',h('h1','myWisper è un luogo dove offrire e cercare aiuto'));
    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','Aiuta')))
    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 è un luogo dove offrire e chiedere aiuto.'));
    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','Aiuta')))
    let row2 = h("div.row-cont", bottoni);
    inner.push(h("h1.mobile-header","myWisper è un luogo dove offrire e chiedere aiuto"));
    inner.push(row2);
    return h("div.hc-banner-mobile",inner);
  },
});
</script>