플러그인에 양식 추가하기

개발
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

무언가 단순한 것을 놓치고 있는 것 같은데, 도저히 보이지 않습니다. 도움이 되시면 감사하겠습니다.

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);
    },
  },
};

이렇게 하면 액션이 정상적으로 작동해야 합니다. 더 자세한 내용은 여기에서 확인하실 수 있습니다.

4

답변 감사합니다. 이제 잘 작동합니다. 여러 가지가 잘못되었던 것 같은데, 가장 큰 문제는 필요 없는 상황에서 Ember.Controller.extend를 잘못 사용한 것이었습니다.