Onclick を持つボタンの追加

[Fausto_Dassenno]

明らかに何かを見落としています。
ボタンを追加して、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.

[codinghorror (Jeff Atwood)]

Discourse は Ember.js アプリであるため、JavaScript のコーディングには Ember のルールに従う必要があります。

Ember から jQuery が完全に削除される予定だと聞いていますので、$ を使うのはあまり良くないでしょう。

[Fausto_Dassenno]

@codinghorror ありがとうございます。

これはコンポーネントで実現できますか、それともプラグインが必要ですか？

[Fausto_Dassenno]

こんにちは、皆さん。

結局、コンポーネントの /head セクションにウィジェットを作成し、それを Handlebars テンプレートに追加しました。

<script type="text/discourse-plugin" version="0.8.18">
let currentLocale = I18n.currentLocale();
I18n.translations[currentLocale].js.custom_modal_title = "マイカスタムモーダル";

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=="+ 新しい Wisper") {
        $('#create-topic').click();
      } else if(arg.target.innerText=="ヘルプ") {
          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","人数が増えれば機能します。友達とシェアしましょう、無料です！"));
    contents.push(h("div.hc-column","ログインして、あなたの助けの依頼を投稿してください"));
    contents.push(h("div.hc-column","助けたいですか？あなたの街の Wisper を探してください"));
    let row1 = h("div.row-cont", contents);
    let h1 = h('div.top-spot',h('h1','myWisper は助けを提供し、求める場所です'));
    let inner = [];
    let bottoni = [];
    bottoni.push(h("div.hc-column",this.attach('modal-button','招待')))
    bottoni.push(h("div.hc-column",this.attach('modal-button','+ 新しい Wisper')))
    bottoni.push(h("div.hc-column",this.attach('modal-button','ヘルプ')))
    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 は助けを提供し、求める場所です。'));
    let inner = [];
    let bottoni = [];
    bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','招待')))
    bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','+ 新しい Wisper')))
    bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','ヘルプ')))
    let row2 = h("div.row-cont", bottoni);
    inner.push(h("h1.mobile-header","myWisper は助けを提供し、求める場所です"));
    inner.push(row2);
    return h("div.hc-banner-mobile",inner);
  },
});
</script>