تمت إضافة Ember.PromiseProxyMixin مؤخرًا إلى وحدات Ember في نواة Discourse.
https://github.com/discourse/discourse/pull/9312
إنه خلط (mixin) مفيد جدًا في Ember يسمح لك بإجراء طلبات غير متزامنة والعمل بسهولة مع الـ Promises داخل مكونات Ember. يمكنك التفكير فيه على أنه React Suspense ولكن لـ Ember. الإمكانات هائلة لتطوير السمات والإضافات في Discourse.
إليك الوثائق الرسمية لـ Ember.PromiseProxyMixin.
وهنا يمكنك العثور على مثال مفصل غير خاص بـ Discourse حول كيفية استخدام Ember.PromiseProxyMixin.
سأقدم مثالًا بسيطًا لكيفية استخدام هذا الخلط داخل سمة Discourse. لنفترض أنه لسبب ما، في مكون topic-list-item، ترغب في تنسيق صورة المستخدم (avatar) إذا كان المستخدم من الطاقم، فيجب أن يكون للصورة إطار مختلف.
في مكان ما في ملف topic-list-item.js(.es6)، ستحتاج إلى:
- استيراد
EmberObjectوPromiseProxyMixinوتوسيعEmberObjectباستخدامPromiseProxyMixin.
import EmberObject from "@ember/object";
import PromiseProxyMixin from "@ember/object/promise-proxy-mixin";
const PromiseObject = EmberObject.extend(PromiseProxyMixin);
// يمكنك استخدام دالة memoize مخصصة لمنع إجراء طلبات متعددة لنفس المستخدمين
const getUser = memoize(username => ajax(`/u/${username}`).then(data => data));
- بعد ذلك، ستحتاج إلى إنشاء خصائص محسوبة (computed properties) هذه:
// وعد محسوب (Computed Promise)
@discourseComputed("topic")
posterPromise(topic) {
const { user } = topic.posters[0];
return getUser(user.username);
},
// هذه الخاصية المحسوبة تغلف الوعد بـ `PromiseObject`
@discourseComputed("posterPromise")
posterProxy() {
const promise = this.get("posterPromise");
return promise && PromiseObject.create({ promise });
},
posterData: reads("posterProxy.content.user"),
@discourseComputed("posterData")
isStaff() {
const posterData = this.get("posterData");
if (!posterData) return false;
const { groups = [] } = posterData;
// للتحقق مما إذا كان المستخدم من الطاقم، يجب علينا فحص
// ما إذا كان المستخدم ينتمي إلى مجموعة طاقم
return groups.some(({ name }) => name === "staff");
}
وفي القالب topic-list-item.hb(r|s)، سيكون لديك شيء مثل هذا:
{{#if posterProxy.isFulfilled}}
{{#if isStaff}}
// قم بالتخصيص الخاص بك
{{/if}}
{{/if}}
يمكنك استخدام isPending لعرض مؤشر تحميل ربما.
آمل أن يساعدك هذا المثال غير المفيد للغاية في فهم كيفية عمل الخلط، وربما يساعدك في إيجاد طريقة لاستخدامه في تطوير سماتك/إضافاتك.
