为插件添加表单

开发
1

我正在尝试创建一个简单的插件，该插件：

  • 在主题时间线上方添加一个表单
  • 将用户输入的电子邮件地址 POST 到一个控制器

表单已渲染在时间线上方，但当我输入电子邮件并单击提交按钮时，我在浏览器控制台中收到此错误：

DEBUG: -------------------------------
vendor.js:49192 DEBUG: Ember  : 3.15.0
vendor.js:49192 DEBUG: jQuery : 3.6.0
vendor.js:49192 DEBUG: -------------------------------
vendor.js:4180 [Violation] 'setTimeout' handler took 489ms
[Violation] Forced reflow while executing JavaScript took 35ms
vendor.js:49192 DEBUG: For more advanced debugging, install the Ember Inspector from https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi
user-presence.js:77 [Violation] 'setInterval' handler took 51ms
vendor.js:49170 Uncaught Error: Assertion Failed: <@ember/component:ember716> had no action handler for: lonerWatch
    at assert (vendor.js:49170)
    at Class.send (vendor.js:44642)
    at Class.superWrapper [as send] (vendor.js:43919)
    at Class.send (plugin-connector.js:75)
    at Class.superWrapper [as send] (vendor.js:43919)
    at vendor.js:22103
    at instrument (vendor.js:50635)
    at vendor.js:22102
    at Backburner._run (vendor.js:67048)
    at Backburner._join (vendor.js:67024)

（目前未完成）代码如下：

/assets/javascripts/discourse/templates/connectors/topic-navigation/loner-watch-topic-form.hbs

<form {{action 'lonerWatch' content on='submit'}}>
    <p>Enter your email address to watch this topic for updates</p>
    <input name="email" placeholder="Your email"/>
    <button>Watch</button>
</form>

/assets/javascripts/discourse/controllers/loner-watch-topic-form.js.es6

export default Ember.Controller.extend({
    actions: {
      lonerWatch(content) {
        console.log(content);
      }
    }
  });

/controllers/loners_controller.rb

class LonersController < ApplicationController
   [...]
    # Watch topic as a staged user
    def watch
      user = ensure_user
      topic = Topic.find(params[:topic_id].to_i)
      TopicUser.change(user, topic.id, notification_level: params[:notification_level].to_i)
    end
  end

我敢肯定我遗漏了一些简单的事情，但我就是没看到。任何帮助都将不胜感激。

1 个赞
2

我刚注意到 /assets/javascripts/discourse/controllers 应该改为 /assets/javascripts/discourse/components。但不幸的是，我仍然收到同样的错误。

我卡住了。有人知道我在这里做错了什么吗？

3

连接器模板和 JS 文件需要位于同一目录中，并且名称相同。因此

/assets/javascripts/discourse/connectors/topic-navigation/loner-watch-topic-form.hbs

<form {{action 'lonerWatch' content on='submit'}}>    
    <p>Enter your email address to watch this topic for updates</p>
    <input name="email" placeholder="Your email"/>
    <button>Watch</button>
</form>

和

/assets/javascripts/discourse/connectors/topic-navigation/loner-watch-topic-form.js

export default {
  actions: {
    lonerWatch(content) {
      console.log(content);
    },
  },
};

然后你的 action 就应该可以工作了。如果你有兴趣，可以在这里阅读更多内容。

5 个赞
4

感谢您的回复。现在可以正常工作了。看起来我好几处都弄错了，但最糟糕的是错误地使用了 Ember.Controller.extend，而实际上并不需要它。

2 个赞