لا يمكن الوصول إلى العنصر المحدد في منفذ المكون الإضافي باستخدام واجهة DOM

مطور
1

استخدمت المخرج (plug-in) التالي لإنشاء زر أسفل الرأس:

<script type="text/x-handlebars" data-template-name="/connectors/below-site-header/vic-button">
    <a id="vic-button" href="http://mathbymiles.com/new-topic?title=&body=&category=uncategorized&tags=" class="btn btn-default">
        <span class="d-button-label">
            اطرح سؤالاً
        </span>
    </a>
</script>

يعمل هذا بشكل ممتاز. ومع ذلك، أريد الآن الوصول إليه باستخدام جافا سكريبت للتلاعب به، لكن عند محاولة الحصول على العنصر بناءً على id vic-button، يعيد السطر الأمر null فقط.

لذا، عندما أقوم بـ:

<script type="text/discourse-plugin" version="0.8">
    const button = document.getElementById('vic-button');
    console.log(button);
</script>

الحصول على null كإخراج. هل لديك أي أفكار؟

إعجاب واحد (1)
2

من المرجح أنه يقوم بتشغيل المحدِّد قبل عرض القالب.

يجب عليك تنفيذ ذلك ‘داخل الإطار’.

أفضل نهج هو تحويل هذا إلى مكون Ember، ثم استخدام خطاف مثل didInsertElement() لالتقاط النقطة التي يصبح فيها متاحًا للتعديل.

تذكّر أن هذا تطبيق ويب وليس صفحة ويب. العناصر ديناميكية وليست ثابتة. منفذ الإضافة نفسه مكون، لذا لا يتم عرضه فورًا.

3 إعجابات
3

هل أفعل شيئًا مثل هذا؟

<script type="text/discourse-plugin" version="0.8">
    api.modifyClass('component:plugin-outlet', {
      didInsertElement() {
        this._super(...arguments);

        const button = document.getElementById('vic-button');
        console.log(button);
      },
    });
</script>

عندما أفعل ذلك، يظهر مخرج null متكرر في وحدة التحكم. أنا مبتدئ تمامًا، لذا حاولت فقط البحث في Meta عن أشخاص يقومون بأشياء مماثلة، لذا ربما هذا ليس المسار الصحيح.

4

تمكنت من حل المشكلة:

api.decoratePluginOutlet(
       "below-site-header",
       (elem, args) => {
           const button = document.getElementById('vic-button');
           console.log(button);
       }
    );

يُظهر المخرجات ما أريده. والآن يمكنني التلاعب بالعنصر!

إعجابَين (2)