Добавление формы в плагин

Разработка
1

Я пытаюсь создать простой плагин, который:

  • добавляет форму над временной шкалой темы
  • отправляет (POST) адрес электронной почты, введенный пользователем, в контроллер

Форма отображается над временной шкалой, но когда я ввожу email и нажимаю кнопку отправки, в консоли браузера появляется следующая ошибка:

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>Введите ваш адрес электронной почты, чтобы отслеживать обновления этой темы</p>
    <input name="email" placeholder="Ваш email"/>
    <button>Отслеживать</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
   [...]
    # Отслеживать тему как временный пользователь
    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

Уверен, что я упускаю что-то простое, но не вижу этого. Буду признателен за любую помощь.

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>Введите ваш адрес электронной почты, чтобы получать обновления по этой теме</p>
    <input name="email" placeholder="Ваш email"/>
    <button>Подписаться</button>
</form>

и

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

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

После этого ваше действие должно работать. Если хотите узнать больше, можете прочитать здесь.

4

Спасибо за ответ. Теперь всё работает. Похоже, я допустил несколько ошибок, но самой серьёзной было ошибочное использование Ember.Controller.extend, когда это было не нужно.