المشكلة

ember-leaflet هو ملحق شائع جدًا من نظام EmberJS البيئي الذي يتيح الكثير من المرونة.

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

الحل

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

// app/components/fake-marker-layer.gts

import MarkerLayer from 'ember-leaflet/components/marker-layer';

export default class FakeMarkerLayer extends MarkerLayer {
  get location() {
    return this.L.latLng(46.68, 7.85);
  }
}

بعد ذلك سنحتاج إلى تسجيل المكون في خدمة نشرة الجمرة:

// app/instance-initializers/leaflet.ts

import FakeMarkerLayer from '../components/fake-marker-layer';
import type Owner from '@ember/owner';

export function initialize(owner: Owner) {
  const emberLeafletService = owner.lookup('service:ember-leaflet');

  if (emberLeafletService) {
    emberLeafletService.registerComponent('fake-marker-layer', {
      as: 'fake-marker',
      component: FakeMarkerLayer,
    });
  }
}

export default {
  initialize,
};

والآن يمكننا استخدامه:

import LeafletMap from 'ember-leaflet/components/leaflet-map';

ملحوظات

يمكنك القراءة عن هذه التقنية أيضًا على صفحة التوثيق الرسمية لنشرة الجمرة.