عرض محتوى مختلف للعرض على الهاتف المحمول في ملف .gjs

مطور
,
1

Trying to update our custom theme component to the new standard after the deprecation notice and I can’t figure out how to show different stuff for mobile users in this setting.

The theme guide doesn’t mention anything about this, the only relevant post I found is api.renderInOutlet not rendering? - #3 by NateDhaliwal which uses this.site.mobileView so I assumed something like the following should work:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("1.8.0", (api) => {
  api.renderInOutlet(
    "composer-after-save-or-cancel",
    `<template>
      {{#if this.site.mobileView}}
      Mobile!
      {{else}}
      Normal!
      {{/if}}
    </template>`
  );
});

But I only ever see the normal content… I am obviously missing something basic…

Thanks for any hints!

2

أوه ، ربما يحتاج فقط إلى استيراد خدمة site يدويًا.

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("1.8.0", (api) => {
  const site = api.container.lookup("service:site");
  api.renderInOutlet(
    "composer-after-save-or-cancel",
    <template>
      {{#if site.mobileView}}
      Mobile!
      {{else}}
      Normal!
      {{/if}}
    </template>
  );
});
3 إعجابات
3

هل سيعمل @service site; أيضاً؟

4

لا. المُزخرف @service متاح فقط في فئات Ember مثل المكونات أو الخدمات. إذا تمت إعادة هيكلة <template>...</template> كمكون منفصل، فيمكنك استخدام المُزخرف. نظرًا لأن apiInitializer() هو مجرد دالة، فيجب الوصول إلى الخدمة مثل JavaScript العادي.

يمكنك رؤية Ember object ownership (getOwner, service injections, etc.)

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

إذا أردت، يمكنك وضع فئة كاملة داخل استدعاء renderInOutlet:

import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";
import { service } from "@ember/service";

export default apiInitializer((api) => {
  api.renderInOutlet(
    "composer-after-save-or-cancel",
    class extends Component {
      @service site;

      <template>
        {{#if this.site.mobileView}}
          Mobile!
        {{else}}
          Normal!
        {{/if}}
      </template>
    }
  );
});

ولكن حل .lookup() معقول أيضًا - هذا ما يفعله @service في الكواليس على أي حال :ok_hand:

6 إعجابات
6

شكرا، هذا يعمل!
ومن المضحك أيضًا كيف أن (على الأقل هذه النكهة من) جافاسكريبت الحديثة تبدو بشكل متزايد مثل جافا الخاصة بالشركات عندما كنت أعمل في هذا العالم (أوائل عام 2010):smiley: