添加一个带有 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 应用，因此您需要遵循 Ember 的 JavaScript 编码规范。

我认为 jQuery 很快也会从 Ember 中完全移除，所以 $ 符号的使用前景并不乐观。

[Fausto_Dassenno]

谢谢 @codinghorror，

这可以通过组件实现，还是需要插件？

[Fausto_Dassenno]

大家好，

我最终在组件的 /head 部分创建了一个小部件，然后在 Handlebar 模板中将其添加进去。

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>