أدخل مكون Glimmer بعد أول منشور

مطور
1

لدي مكون Glimmer. إنه يعمل. لكنني أحتاجه ليأتي بعد المنشور الأول في موضوع. لا يوجد منفذ إضافي هناك.

لقد اكتشفت كيفية إدراج بعض النصوص في innerHTML الخاص بعلامة <article>، وهذا يضع هذا النص في المكان الذي أريده، ولكن لا يبدو أن هناك طريقة للقيام بذلك باستخدام مكون.

هل فاتني شيء؟

نظرت في كيفية قيام adplugin بإدراج الإعلانات بين المنشورات، لكنني لم أتمكن من فهمها تمامًا.

export default {
  name: "initialize-ad-plugin",
  initialize(container) {
    registerWidgetShim(
      "after-post-ad",
      "div.widget-connector",
      hbs`<PostBottomAd @model={{@data}} />`
    );

    withPluginApi("0.1", (api) => {
      api.decorateWidget("post:after", (helper) => {
        return helper.attach("after-post-ad", helper.widget.model);
      });
    });

....
2

دعنا نضيف واحدًا! أين تريده؟

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

إعجابَين (2)
3

هذا المخرج سيطابق وظيفة decorateWidget("post:after، وهو ما يستخدمه adplugin:

3 إعجابات
4

هذا رائع! تذمر وستحصل على ما تريد!

في الواقع ، “أعرف” أنه من “السهل” إضافة منافذ المكونات الإضافية ، ولكن عندما كنت “أعرف” كيفية إضافتها ، كان ذلك في ملف hbs.

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

article:after هو ما ابتكرته في وقت ما في محاولاتي السابقة.

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

يتم تمرير المنشور كأحد وسائط المخرج، لذا يمكنك التحقق من post.post_number == 1

هاها! يسعدني دائمًا المساعدة في هذا النوع من الأسئلة. من الأفضل للجميع إذا تمكنا من جعل السمات والإضافات تستخدم واجهات برمجة التطبيقات القياسية مثل هذه بدلاً من الحلول البديلة للأدوات (والتي سيتم إيقافها في المستقبل غير البعيد).

نعم هذا عادل. إضافتها داخل الأدوات تمثل صداعًا في الجانب الأساسي. ولكن من جانب السمة/الإضافة يجب أن تكون نظيفة للغاية :crossed_fingers:

سأحاول اكتشاف فشل الاختبارات هذه والحصول على طلب السحب (PR) مدمج غدًا. (يبدو أن عنصر HTML الإضافي يعبث ببعض المحددات الهشة في اختبارات qunit)

إعجابَين (2)
6

آها! @outletArgs={{hash post=@data.post}}. هناك فرصة معقولة لمعرفة كيفية القيام بذلك. :slight_smile:

شكراً مرة أخرى!

إعجابَين (2)
7

أخشى أنني كنت متفائلًا بعض الشيء هنا يا @pfaffman، آسف! سيكون لـ PR الذي قدمته مقدمة غلاف جديد <div> بين كل مشاركة، حتى لو لم يتم استخدام المنفذ. هذا ليس شيئًا نريده حقًا.\n\nقد تكون هناك طرق لتجنب الغلاف… ولكن لا شيء بسيط يمكننا القيام به على الفور.\n\nلذلك أعتقد أن أفضل حل فوري لك سيكون نسخ تطبيق adplugin الذي أشرت إليه في OP.\n\n[quote="Jay Pfaffman, post:1, topic:303282, username:pfaffman"]\nلكنني لم أتمكن من فهمه تمامًا\n[/quote]\nبشكل أساسي:\n\n1. قم بإنشاء مكون (Glimmer أو كلاسيكي، لا يهم) يقوم بعرض ما تريده\n\n2. استخدم registerWidgetShim لجعله متاحًا كمكون واجهة. يقوم مثال adplugin بإنشاء واجهة تسمى “after-post-ad”، والتي تعرض المكون PostBottomAd. يتم تمرير جميع سمات الواجهة (@data) إلى الوسيط @model للمكون.\n\n3. استخدم api.decorateWidget لعرض واجهة الواجهة الجديدة الخاصة بك في موضع post:after. في حالتك، نظرًا لأنك تريده فقط في المشاركة الأولى، يمكنك القيام بشيء مثل\n\n js\n api.decorateWidget(\"post:after\", (helper) => {\n if(helper.widget.model.post_number === 1){\n return helper.attach(\"my-widget-shim\");\n }\n });\n \n\nعندما نقوم بـ glimmer-ify لصفحة الموضوع في النهاية، ستحتاج إلى إزالة واجهة الواجهة/الديكور، واستبدالها بمنفذ إضافة. يجب أن يكون ذلك سهلاً للغاية، حيث سيتم إعادة استخدام كل منطق العرض الخاص بك في المكون في منفذ الإضافة.\n\nأخبرنا كيف تسير الأمور! يسعدنا المساعدة في أي أسئلة متابعة - أعرف أن هناك الكثير من الأجزاء المتحركة هنا.

3 إعجابات
8

أنا قريب جدًا!

المشكلة الوحيدة هي أن المكون يحتاج إلى currentUser ولا يمكنني معرفة كيفية تمريره. إليك ما لا يعمل.

import { hbs } from "ember-cli-htmlbars";
import { withPluginApi } from "discourse/lib/plugin-api";
import Site from "discourse/models/site";
import { registerWidgetShim } from "discourse/widgets/render-glimmer";
import Banner from "../components/banner";

export default {
  name: "initialize-banner-widget",
  initialize(container) {
    registerWidgetShim(
      "geo-banner-widget",
      "div.widget-connector",
      hbs`<Banner @currentUser={{currentUser}} />`
    );

    // withPluginApi("0.1", (api) => {
    //   console.log("doing plugin");
    //   api.decorateWidget("post:after", (helper) => {
    //     return helper.attach("geo-banner-widget", helper.widget.model);
    //   });
    // });

    withPluginApi("0.1", (api) => {
      const currentUser = container.lookup("service:current-user");
      api.decorateWidget("post:after", (helper) => {
        console.log(`decorate widget ${currentUser.username}`, );
        if(helper.widget.model.post_number === 1){
          return helper.attach("geo-banner-widget", { currentUser });
        }
      });
    });
  },
};
إعجاب واحد (1)
9

في مكون Banner الخاص بك، يمكنك حقن خدمة currentUser بهذا الشكل:

class Banner extends Component {
  @service currentUser;
}

بعد ذلك، لن تحتاج إلى تمريرها من الأداة.

إعجابَين (2)
10

كنت أعرف أنه من الغباء تمرير currentUser، لكنني لم أتمكن من فهم ذلك!
القطعة الأخرى، في حالة عدم احتمال أن يجد أي شخص آخر هذا مفيدًا، هي

import Service, { inject as service } from "@ember/service";

import { hbs } from "ember-cli-htmlbars";
import { withPluginApi } from "discourse/lib/plugin-api";
import { registerWidgetShim } from "discourse/widgets/render-glimmer";

export default {
  name: "initialize-banner-widget",
  initialize(container) {
    registerWidgetShim(
      "geo-banner-widget",
      "div.widget-connector",
      hbs`<Banner/>`
    );

    withPluginApi("0.1", (api) => {
      api.decorateWidget("post:after", (helper) => {
        const currentUser = container.lookup("service:current-user");
        if(helper.widget.model.post_number === 1){
          return helper.attach("geo-banner-widget");
        }
      });
    });
  },
};
12

نعم!

في هذه الحالة، لا أعتقد أنك ستحتاج إلى استيراد فئة Service. هذا لن يكون ضروريًا إلا إذا كنت تنشئ خدمة خاصة بك. أنت تحتاج فقط إلى المُزخرف الحقن service.

وفي أحدث إصدار من Discourse/Ember، يمكن تبسيطه أكثر لتجنب الحاجة إلى الاسم المستعار ‘inject as’. الآن تجعل Ember المُزخرف الحقن متاحًا مباشرة باسم service.

import { service } from "@ember/service";

(لكن { inject as service } القديم لا يزال يعمل، وأنا لست على علم بأي خطط لإيقافه في Ember)

تحرير: ولكن ربما يمكنني استخدام decorateWidget بدلاً من plugin outlet. . .

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

هذا ما يعتقده المدقق اللغوي أيضًا :slight_smile:

أفضل ذلك. لا يزال المكون الإضافي للإعلانات الداخلية يقوم بذلك بالطريقة القديمة. :slight_smile:

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

تم إغلاق هذا الموضوع تلقائيًا بعد 30 يومًا من آخر رد. لم يعد يُسمح بالردود الجديدة.