إضافة نموذج إلى إضافة

مطور
1

أحاول إنشاء إضافة بسيطة تقوم بما يلي:

  • إضافة نموذج فوق خط زمني الموضوع
  • إرسال عنوان البريد الإلكتروني الذي يدخله المستخدم إلى وحدة تحكم

يتم عرض النموذج فوق الخط الزمني، ولكن عندما أدخل بريدًا إلكترونيًا وأضغط على زر الإرسال، أحصل على هذا الخطأ في وحدة تحكم المتصفح:

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>أدخل عنوان بريدك الإلكتروني لمراقبة هذا الموضوع للحصول على التحديثات</p>
    <input name="email" placeholder="بريدك الإلكتروني"/>
    <button>مراقبة</button>
</form>

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

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

يجب أن يعمل الإجراء الخاص بك بعد ذلك. يمكنك قراءة المزيد هنا إذا كنت مهتمًا.

5 إعجابات
4

شكراً على الرد. إنه يعمل الآن. يبدو أن لدي عدة أشياء خاطئة، لكن الأسوأ كان استخدام Ember.Controller.extend عن طريق الخطأ عندما لم يكن ذلك ضرورياً.

إعجابَين (2)