نستمر في نشر ترجمة البرنامج التعليمي من الدليل الرسمي لـ Ember.js. يتكون البرنامج التعليمي من جزأين ، وهذا هو النصف الثاني من الجزء الأول من البرنامج التعليمي. نذكرك أنه يمكنك قراءة النصف الأول على هذا الرابط

تشير قائمة الموضوعات التي تم تناولها في البرنامج التعليمي إلى:

• باستخدام Ember CLI
• ملف تطبيق Ember والملاحة المجلد
• إنشاء والربط بين الصفحات
• القوالب والمكونات
• الاختبار الآلي
• العمل مع خادم البيانات
• شرائح ديناميكية في الطرق
• الخدمات في Ember
• مكتبة بيانات العنبر
• محولات ومسلسلات
• مزود مكون نمط

يستريح ، افتح المحطات ، ابحث عن المشروع على جهاز الكمبيوتر الخاص بك ودعنا ننتقل. وتذكر أنه إذا واجهت أي صعوبات ، فيمكنك دائمًا طلب المساعدة في قناة مجتمع Discord (في القناة الروسية # lang- Russian) ، وكذلك في قناة البرق باللغة الروسية ember_js

تفاصيل المكون

حان الوقت للعمل أخيرًا على قائمة التأجير:

من خلال تجميع هذه القائمة من العقارات المؤجرة ، سوف تتعرف على:

• جيل مكون
• تنظيم التعليمات البرمجية باستخدام مكونات مساحة الاسم
• إعادة توجيه سمات HTML مع ...attributes
• تحديد المبلغ المناسب لتغطية الاختبار

مكون الجيل

لنبدأ بإنشاء المكون <Rental> . هذه المرة سوف نستخدم مولد المكون لإنشاء قالب وملف اختبار لنا:

 $ ember generate component rental installing component create app/components/rental.hbs skip app/components/rental.js tip to add a class, run `ember generate component-class rental` installing component-test create tests/integration/components/rental-test.js 

أنشأ المولد ملفين جديدين بالنسبة لنا: قالب المكون في app/components/rental.hbs وملف اختبار المكون في tests/integration/components/rental-test.js .

سنبدأ بتحرير القالب. لنقم بتشكيل تفاصيل كائن مستأجر واحد ، ثم استبداله ببيانات حقيقية من الخادم.

ثم سنكتب اختبارًا للتأكد من أن جميع التفاصيل موجودة. سنستبدل اختبار القوالب الذي تم إنشاؤه من قبل فرقنا الخاصة ، كما فعلنا سابقًا للمكون <Jumbo> :

يجب أن تمر الاختبارات.

أخيرًا ، دعنا نضيف مكونًا جديدًا إلى قالب الفهرس لملء الصفحة.

في هذه الحالة ، يجب أن نرى المكون <Rental> يعرض Grand Old Mansion ثلاث مرات على الصفحة:

كل شيء يبدو جيدا لبعض العمل القليل!

تنظيم التعليمات البرمجية باستخدام مساحات الأسماء

المقبل ، إضافة صورة لتأجير الممتلكات. سوف نستخدم مولد المكون لهذا مرة أخرى:

 $ ember generate component rental/image installing component create app/components/rental/image.hbs skip app/components/rental/image.js tip to add a class, run `ember generate component-class rental/image` installing component-test create tests/integration/components/rental/image-test.js 

هذه المرة كان لدينا / في اسم المكون. أدى ذلك إلى إنشاء مكون في app/components/rental/image.hbs ، والذي يمكن تسميته باسم <Rental::Image> .

تُعرف المكونات المشابهة بمكونات مساحة الاسم . تسمح لنا مساحة الاسم بتنظيم مكوناتنا في مجلدات وفقًا للغرض منها. هذا اختياري تمامًا ، لكنه مناسب ، خاصةً عندما تقوم بتطوير تطبيق كبير في فريق.

إعادة توجيه سمات HTML مع ...attributes

لنعدّل قالب المكون:

بدلاً من الإعداد الثابت لقيم محددة src و alt في <img> ، اخترنا الكلمة الرئيسية ...attributes ، والتي تسمى أحيانًا أيضًا "splattributes". يسمح لك هذا بتمرير سمات HTML التعسفية عند استدعاء هذا المكون ، على سبيل المثال مثل هذا:

حددنا هنا سمة HTML src و alt ، والتي سيتم تمريرها إلى المكون وإرفاقها بالعنصر ، حيث يتم تطبيق ...attributes في قالب المكون. قد تعتقد أن هذا يشبه {{yield}} ، ولكن فقط لسمات HTML وليس لمحتوى العرض. في الواقع ، لقد استخدمنا هذه الوظيفة بالفعل في وقت سابق عندما تجاوزنا سمة class إلى <LinkTo> .

وبالتالي ، لا يرتبط مكون <Rental::Image> بأي خاصية تأجير خاصة على الموقع. بالطبع ، كل شيء مضغوط معنا أيضًا ، لكننا سنتعامل مع هذا قريبًا. في غضون ذلك ، سنقصر القرص الثابت بأكمله على مكون بحيث يكون من الأسهل مسحه عندما ننتقل إلى استخراج بيانات حقيقية.

بشكل عام ، من الجيد إضافة ...attributes لعنصر الجذر في المكون الخاص بك. سيوفر ذلك أقصى قدر من المرونة ، حيث قد يحتاج البادئ إلى اجتياز فصول التصميم أو سمات ARIA لتحسين إمكانية الوصول.

الآن دعنا نكتب اختبارًا لمكوننا الجديد!

تحديد المبلغ المناسب لتغطية الاختبار

أخيرًا ، نحتاج أيضًا إلى تحديث اختبارات المكون <Rental> لضمان نجاحنا في استدعاء <Rental::Image> .

نظرًا لأننا كتبنا بالفعل اختبارات متعلقة بـ <Rental::Image> ، يمكننا هنا حذف التفاصيل وتقليل الشيك. وبالتالي ، لا يتعين علينا أيضًا تحديث اختبار <Rental> كلما أجرينا تغييرات على <Rental::Image> .

المكونات التفاعلية

في هذا الفصل ، يمكنك إضافة تفاعل إلى الصفحة ، مما يسمح للمستخدم بالنقر فوق الصورة لتكبيرها أو تصغيرها:

في هذه الحالة ، سوف تتعلم عن:

• مضيفا السلوك إلى مكونات مع فئات
• حالات مثيل الوصول من القوالب
• إدارة الدولة مع خصائص مجنزرة
• استخدام بناء الجملة الشرطية في القوالب
• الاستجابة لتفاعل المستخدم مع الإجراءات
• كيفية استدعاء عناصر المعدل
• اختبار تفاعل المستخدم

مضيفا السلوك إلى مكونات مع فئات

حتى الآن ، كل المكونات التي كتبناها تقدمية بحتة - إنها مجرد أجزاء من العلامات القابلة لإعادة الاستخدام. هذا رائع بالطبع ، ولكن في مكونات Ember يمكن أن تفعل الكثير!

في بعض الأحيان تريد ربط بعض السلوك بمكوناتك حتى يتمكنوا من فعل أشياء أكثر إثارة للاهتمام. على سبيل المثال ، يمكن لـ <LinkTo> الاستجابة للنقرات عن طريق تغيير عنوان URL والانتقال إلى صفحة أخرى.

هنا سوف نقوم بشيء مماثل! سنقوم بتنفيذ وظيفة «View Larger» و «View Smaller» ، والتي ستتيح لمستخدمينا النقر فوق الصورة في المنزل ، وعرض النسخة الأكبر ، والنقر عليها مرة أخرى للعودة إلى الإصدار الأصغر.

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

يسمح لنا Ember بالإضافة إلى ذلك بربط كود JavaScript بمكون مخصص لهذا الغرض على وجه التحديد. يمكننا إضافة ملف JavaScript لمكون <Rental::Image> خلال تشغيل مولد المكون:

 $ ember generate component-class rental/image installing component-class create app/components/rental/image.js 

قام هذا الأمر بإنشاء ملف جافا سكريبت بنفس اسم قالب المكون الخاص بنا في app/components/rentals/image.js . أنه يحتوي على فئة JavaScript موروثة من @glimmer/component .

يشرح زوي ...

@glimmer/component أو Glimmer component هي واحدة من فئات متعددة من المكونات المتاحة للاستخدام. إنها نقطة انطلاق رائعة عندما تريد إضافة سلوك إلى مكوناتك. في هذا البرنامج التعليمي ، سنستخدم مكونات Glimmer فقط.

بشكل عام ، يجب استخدام مكونات Glimmer كلما كان ذلك ممكنًا. ومع ذلك ، يمكنك أيضًا رؤية @ember/components (المكونات الكلاسيكية) المستخدمة في التطبيقات القديمة. يمكنك التمييز بينها وبين بعضها البعض من خلال النظر إلى المسار لاستيرادها (وهو أمر مفيد عند البحث عن الوثائق المناسبة ، نظرًا لأن لديها واجهات برمجة التطبيقات مختلفة وغير متوافقة ).

يعمل Ember على إنشاء الفصل كلما تم استدعاء المكون الخاص بنا. يمكننا استخدام هذا المثال لتخزين حالتنا:

هنا ، في مُنشئ المكون ، قمنا بتهيئة متغير المثيل this.isLarge مع القيمة false ، لأن هذه هي الحالة الافتراضية التي نريدها للمكون الخاص بنا.

حالات مثيل الوصول من القوالب

لنقم بتحديث نموذجنا لاستخدام هذه الحالة التي أضفناها للتو:

في القالب ، لدينا إمكانية الوصول إلى متغيرات مثيل المكون. بناء الجملة الشرطي {{#if ...}}...{{else}}...{{/if}} يسمح لك بعرض محتوى مختلف وفقًا للشرط (في هذه الحالة ، قيمة متغير المثيل this.isLarge ). من خلال الجمع بين هاتين الوظيفتين ، يمكننا على التوالي تصور نسخة صغيرة وكبيرة من الصورة.

يمكننا التحقق من ذلك عن طريق تغيير القيمة الأولية في ملف JavaScript مؤقتًا. إذا قمنا بتغيير app/components/rental/image.js لتهيئة this.isLarge = true ؛ في المنشئ ، يجب أن نرى نسخة كبيرة من صورة الملكية في المتصفح. عظيم!

بعد أن فحصنا ، يمكننا تغيير this.isLarge مرة أخرى إلى false .

نظرًا لأن نمط التهيئة لمتغيرات المثال في المُنشئ شائع إلى حد ما ، فهناك صيغة أقصر بكثير لذلك:

نفس الوظيفة ، ولكن أقصر بكثير!

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

إدارة الدولة باستخدام خصائص مجنزرة

دعنا نغير صفنا عن طريق إضافة طريقة لتبديل الحجم:

لقد قمنا ببعض الأشياء هنا ، لذلك دعونا نتوصل إليها.

أولاً ، أضفنا @tracked الديكور @tracked إلى isLarge مثيل @tracked . يخبر هذا التعليق التوضيحي Ember بتتبع هذا المتغير للحصول على التحديثات. كلما تغيرت قيمة هذا المتغير ، يقوم Ember تلقائيًا بإعادة رسم أي قوالب تعتمد على قيمتها.

في حالتنا ، كلما this.isLarge قيمة جديدة لهذا. this.isLarge ، فإن التعليق التوضيحي this.isLarge سيجبر Ember على إعادة تقييم الشرط {{#if this.isLarge}} في {{#if this.isLarge}} والتبديل بين الكتلتين ، على التوالي.

يشرح زوي ...

لا تقلق! إذا كنت تشير إلى متغير في القالب ، لكنك نسيت أن تضيف الديكور @tracked ، في وضع التطوير ، سوف تحصل على خطأ واضح عند تغيير قيمته!

نحن نعالج إجراءات المستخدم

ثم أضفنا أسلوب toggleSize إلى صفنا ، والذي يقوم بتبديل هذا. this.isLarge على عكس حالته الحالية ( false يصبح true أو true يصبح false ).

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

يشرح زوي ...

إذا نسيت إضافة ديكور @action ، فستحصل أيضًا على خطأ عند النقر فوق الزر في وضع التطوير!

الآن حان الوقت لاستخدام هذا في القالب:

لقد غيرنا شيئين.

أولاً ، نظرًا لأننا أردنا جعل مكوّننا تفاعليًا ، فقد حولنا العلامة التي تحتوي على العلامة من <div> إلى <button> (هذا مهم لأسباب إمكانية الوصول). باستخدام العلامة الدلالية الصحيحة ، سنحصل أيضًا على تركيز "مجاني" وتفاعل لوحة المفاتيح.

ثم استخدمنا {{on}} المعدل لإرفاق this.toggleSize كجهاز نقرة زر.

وبالتالي ، أنشأنا أول عنصر تفاعلي لدينا. جرب كيف يعمل في المتصفح!

اختبار تفاعل المستخدم

أخيرًا ، لنكتب اختبارًا لهذا السلوك الجديد:

نتيجة الاختبار

دعونا تنظيف القالب لدينا قبل المضي قدما. لقد أضفنا الكثير من التكرارات عندما قمنا بإدراج التعبيرات الشرطية في القالب. إذا نظرنا عن كثب ، فإن الأشياء الوحيدة التي تختلف بين هاتين الكتلتين هي:
1) وجود فئة CSS "large" في <button> .
2) النص «» و «» .

هذه التغييرات مخفية في الكثير من الشفرات المكررة. يمكننا تقليل الازدواجية باستخدام تعبير {{if}} بدلاً من ذلك:

يأخذ إصدار التعبير {{if}} وسيطين. الوسيطة الأولى هي الشرط . الوسيطة الثانية هي تعبير ، يجب تنفيذه إذا كانت الحالة صحيحة.

اختياريًا ، قد {{if}} بمثابة الوسيطة الثالثة تعبيرًا يجب تنفيذه إذا كان الشرط خاطئًا. هذا يعني أنه يمكننا إعادة كتابة تسمية الزر كما يلي:

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

قم بإجراء الاختبارات لآخر مرة للتأكد من أن إعادة بيعنا لم يكسر أي شيء ، وسنكون مستعدين للتحدي التالي!

إعادة استخدام المكونات

الجزء المتبقي غير المحقق في المكون عبارة عن خريطة توضح موقع المنزل ، والتي سنواصل العمل على:

عند إضافة خريطة ، ستتعلم:

• إدارة تكوين مستوى التطبيق
• المعلمة من المكونات مع الحجج
• الوصول إلى وسيطات المكون
• تحريف القيم في القوالب
• تجاوز سمات HTML في ... السمات
• إعادة البيع باستخدام getters والتتبع التلقائي (المسار التلقائي)
• استرداد قيم JavaScript في سياق اختبار

إدارة تكوين مستوى التطبيق

سنستخدم واجهة برمجة تطبيقات Mapbox لإنشاء خرائط لخصائصنا المؤجرة. يمكنك التسجيل مجانا وبدون بطاقة ائتمان.

يوفر Mapbox واجهة برمجة تطبيقات لصورة خريطة ثابتة تخدم صور الخريطة بتنسيق PNG. هذا يعني أنه يمكننا إنشاء عنوان URL المناسب للمعلمات التي نريدها وعرض الخريطة باستخدام <img> القياسي. الدرجة!

إذا كنت مهتمًا ، يمكنك استكشاف الخيارات المتاحة في Mapbox باستخدام صندوق رمل تفاعلي .

بعد أن قمت بالتسجيل في الخدمة ، خذ الرمز المميز العام ( الرمز المميز الافتراضي العام) والصقه في config/environment.js :

كما يوحي الاسم ، config/environment.js استخدام config/environment.js لتكوين تطبيقنا وتخزين مفاتيح API مثل هذه. يمكن الوصول إلى هذه القيم من أجزاء أخرى من التطبيق لدينا ، ويمكن أن يكون لها قيم مختلفة حسب البيئة الحالية (التي يمكن أن تكون تطوير أو اختبار (اختبار) أو إنتاج (إنتاج)).

يشرح زوي ...

إذا كنت ترغب في ذلك ، يمكنك إنشاء رموز وصول مختلفة لـ Mapbox لاستخدامها في بيئات مختلفة. كحد أدنى ، يجب أن يكون لكل رمز نطاق "أنماط: تجانب" من أجل استخدام API Mapbox Static Image.

بعد حفظ التغييرات في ملف التكوين الخاص بنا ، سنحتاج إلى إعادة تشغيل خادم التطوير الخاص بنا لتلقي هذه التغييرات. على عكس الملفات التي قمنا بتحريرها ، لا يتم إعادة config/environment.js تلقائيًا.

يمكنك إيقاف الخادم عن طريق العثور على إطار المحطة الطرفية حيث ember server تشغيل ember server ، ثم اضغط على Ctrl + C أي ، عن طريق الضغط على مفتاح "C" على لوحة المفاتيح أثناء الضغط باستمرار على مفتاح "Ctrl". بمجرد أن يتم إيقافه ، يمكنك تشغيله مرة أخرى باستخدام نفس أمر ember server .

 $ ember server building... Build successful (13286ms) – Serving on http://localhost:4200/ 

إنشاء مكون يحتوي على فئة مكون

بعد إضافة مفتاح Mapbox API إلى التطبيق ، فلننشئ مكونًا جديدًا لخريطتنا.

 $ ember generate component map --with-component-class installing component create app/components/map.js create app/components/map.hbs installing component-test create tests/integration/components/map-test.js 

نظرًا لأن ليس لكل مكون بالضرورة سلوك محدد مرتبط به ، فإن منشئ المكون بشكل افتراضي لا ينشئ ملف JavaScript لنا. كما رأينا سابقًا ، يمكننا دائمًا استخدام مولد المكونات لإضافته لاحقًا.

ومع ذلك ، في حالة مكون <Map> ، نحن على يقين من أننا سنحتاج إلى ملف JavaScript لبعض السلوكيات التي لم نحددها بعد! لذلك ، يمكننا تمرير علامة --with-component-class مولد --with-component-class بحيث يكون لدينا كل ما نحتاجه من البداية.

زوي ينصح ...

الكثير للكتابة؟ استخدم الأمر ember g component map -gc . تشير علامة -gc إلى مكون Glimmer ( g limmer c omponent) ، وكذلك تنشئ الفئة ( g enerate c lass)

معلمة المكونات باستخدام الوسائط

لنبدأ بملف JavaScript الخاص بنا:

نحن هنا نستورد رمز الوصول من ملف التكوين ونعيده من token getter. يسمح لنا ذلك بالوصول إلى الرمز المميز الخاص بنا باعتباره this.token سواء داخل فئة MapComponent أو في قالب المكون. من المهم أيضًا تشفير الرمز المميز ، في حالة احتوائه على أي أحرف خاصة ليست آمنة لعنوان URL.

الاستيفاء من القيم في الأنماط

الآن دعنا ننتقل من ملف JavaScript إلى القالب:

أولاً ، لدينا عنصر حاوية للتصميم.

ثم لدينا <img> لطلب وتقديم صورة خريطة ثابتة من Mapbox.

يحتوي @lat على العديد من القيم التي لا وجود لها بعد @lat و @lng و @zoom @width و @height و @height . هذه هي وسيطات المكون <Map> الذي سنوفره عند استدعاء.

من خلال تعديل مكوننا باستخدام الوسائط ، أنشأنا مكونًا قابلاً لإعادة الاستخدام يمكن استدعاؤه من أجزاء مختلفة من التطبيق وتخصيصه لتلبية احتياجات هذه السياقات المحددة. لقد رأينا هذا <LinkTo> عند استخدام المكون <LinkTo> ؛ نحتاج إلى تحديد وسيطة @route تعرف الصفحة التي يجب الانتقال إليها.

لقد قدمنا ​​قيمة افتراضية معقولة لسمة alt بناءً على قيم @lat و @lng . قد تلاحظ أننا نقوم بتحريف القيم مباشرة في قيمة السمة alt . سيقوم Ember بضم هذه القيم المحرف تلقائيًا إلى قيمة سلسلة ، بما في ذلك تنفيذ أي HTML ضروري.

تجاوز سمات HTML إلى ...attributes

بعد ذلك ، استخدمنا ...attributes للسماح للمتصل بتخصيص <img> ، على سبيل المثال ، تمرير سمات إضافية مثل class ، وأيضًا تجاوز سمة alt الافتراضية الخاصة بنا alt أكثر تحديدًا أو صديقة للإنسان.

النظام مهم! يطبق Ember السمات بالترتيب الذي تظهر به. من خلال تعيين السمة هي القيمة alt الافتراضية أولاً (قبل تطبيق ...attributes ) ، فإننا نوفر للمتصل بشكل صريح الفرصة لتوفير سمة alt أكثر تخصصًا وفقًا لحالة الاستخدام الضرورية.

نظرًا لأن السمة alt تم تمريرها (إن وجدت) ستظهر بعد خاصتنا ، فستتجاوز القيمة التي حددناها. من ناحية أخرى ، من المهم أن نعين سمات src width height بعد ... حتى لا يتم الكتابة عليها عن طريق الخطأ من قبل المحتل.

src السمة src جميع المعلمات الضرورية في تنسيق URL لواجهة برمجة التطبيقات للصورة الثابتة لـ Mapbox ، بما في ذلك الرمز المميز الآمن لعنوان URL this.token .

أخيرًا ، نظرًا لأننا نستخدم @2x صورة "شبكية العين" ، يجب علينا تحديد سمات width height . وإلا ، سيتم عرض <img> ضعف ما توقعنا!

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

لاحظ أن hasAttribute المساعد hasAttribute من qunit-dom يدعم استخدام التعبيرات العادية . , , src https://api.mapbox.com/ ( , ). , , .

… .

, ! , ? , <Map> <Rental> :

!

...

, , config/environment.js MAPBOX_ACCESS_TOKEN . ! , Ember-.

<Rental> , <Map> .

- (auto-track)

<Map> src <img> , . — JavaScript .

JavaScript API this.args.* . , URL .

...

this.args — API, Glimmer. (, «» ) (legacy) , API JavaScript .

! !

, @tracked . , , Ember .

, , , . , src lat , lng , width , height zoom this.args . , , , {{this.src}} .

Ember , . @tracked , Ember , (invalidate) , «» . (auto-track). , this.args ( , this.args.* ), @tracked Glimmer. , (Just works).

JavaScript

, :

API this.setProperties , .

, . ( !).

this , render . «» . .

!

<Rental> . , :

:

• (model hook)
• (mocking) JSON
• (remote)
• {{#each}}

<Rental> . , , , , . .

, , . , .

, Ember — . , , .

. app/routes/index.js :

, , . Route . , .

Route IndexRoute, , .

. ? model() . .

, . Ember , . , , ( ).

, . , async . await . ( : , Promise Javascript )

. , , JavaScript ( POJO (Plain Old Javascript Object)).

, , , . @model . POJO, .

, , title :

, .

! رائع

, , , , , ! <Rental> , .

.

-, <Rental> @rental . <h1> , , :

@model <Rental> @rental , «Grand Old Mansion» <Rental> ! , @rental .

, «Grand Old Mansion», , .

, : , .

, , , , .

<Rental> . , setProperties , .

, <Rental> render @rental . , !

(mocking) JSON

, , , , , !

, , , API. , API . JSON . , JSON HTTP- — , API, — - . باردة!

? , JSON .zip. public .

, public :

 public ├── api │ ├── rentals │ │ ├── downtown-charm.json │ │ ├── grand-old-mansion.json │ │ └── urban-living.json │ └── rentals.json ├── assets │ └── images │ └── teaching-tomster.png └── robots.txt 4 directories, 6 files 

, , URL http://localhost:4200/api/rentals.json .

«» JSON. !

(remote)

. , .

?

, Fetch API JSON API /api/rentals.json , URL, .

, . Fetch API , fetch async , . , await .

Fetch API . , ; , JSON, json() . , await .

, , .

JSON:API , , .

-, JSON:API , "data" , . ; , , , — , .

, , . type id , (!). , , attributes .

, , , , : , , type , - . type "Standalone" "Community", , <Rental> .

JSON:API. .

:

(parsing) JSON attributes , type , . , , - .

! .

(helper) {{#each}}

, , — index.hbs , <Rental> . @rental @model . , @model — ()! , , .

.

{{#each}}...{{/each}} , . — — . — <Rental> , <li> .

{{rental}} . rental ? , ! as |rental| each . - , as |property| , {{property}} .

, .

الصيحة! , . fetch . , ?

, !

( 1.1 1.2)

Ember!

Ember, .

#Emberjs. Discord , ember_js

عندما تعود ، سوف نعتمد على ما تعلمناه في الجزء الأول ، وننتقل إلى مستوى جديد!

استكمال: وهدم أشكر المستخدم MK1301 لتصحيح الخطأ.