Aurelia - History Plugin اضافة التنقل الي الامام والي الخلف أوريليا

 Aurelia - History  Plugin اضافة التنقل الي الامام والي الخلف أوريليا 

البرنامج المساعد aurelia-history .

الخطوة 1 - تثبيت البرنامج المساعد

هذا البرنامج المساعد متاح بالفعل كجزء من التكوين القياسي. إذا قمت بتعيين aurelia.use.standardConfiguration () كجزء من التكوين اليدوي ، فأنت جاهز للانطلاق .

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging();

   aurelia.start().then(() => aurelia.setRoot());
}

الخطوة 2 - استخدام المحفوظات

سنستخدم مثالاً من الفصل الأخير ( Aurelia - Routing ). إذا أردنا تعيين وظيفة التنقل للخلف أو للأمام ، فيمكننا استخدام كائن المحفوظات مع أساليب back () و forward () . سنضيف هذا بعد تكوين جهاز التوجيه.

app.js

export class App {
   configureRouter(config, router) {
      config.title = 'Aurelia';
      config.map([
         { route: ['','home'],  name: 'home',  
            moduleId: './pages/home/home',  nav: true, title:'Home' },
         { route: 'about',  name: 'about',    
            moduleId: './pages/about/about',    nav: true, title:'About' }
      ]);
      this.router = router;
   }
   goBack() {
      history.back();
   }
	goForward() {
      history.forward();
   }
}

الآن ، دعنا نضيف زرين إلى وجهة نظرنا .

app.html

<template>
   <nav>
      <ul>
         <li repeat.for = "row of router.navigation">      
            <a href.bind = "row.href">${row.title}</a>
         </li>
      </ul>
   </nav>
	
   <button click.delegate = "goBack()"></button> 
   //The button used for navigationg back...
	
   <button click.delegate = "goForward()"></button> 
   //The button used for navigationg forward...
	
   <router-view></router-view>
</template>

يمكن للمستخدمين التنقل للخلف وللأمام بالنقر فوق الأزرار التي أضفناها.

Aurelia - Routing أوريليا - التوجيه

 Aurelia - Routing أوريليا - التوجيه

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

الخطوة 1 - إنشاء الصفحات

لقد أنشأنا بالفعل مجلد مكونات في أحد الفصول السابقة. إذا لم تكن قد قمت بإنشائه بالفعل ، فيجب عليك وضعه داخل مجلد src .

C:\Users\username\Desktop\aureliaApp\src>mkdir components

داخل هذا المجلد، فإننا سنضع المنزل و عن الدلائل.

C:\Users\username\Desktop\aureliaApp\src\components>mkdir home
C:\Users\username\Desktop\aureliaApp\src\components>mkdir about

داخل المنزل مجلد، نحن بحاجة إلى خلق رأي و الرأي طراز الملفات.

C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.js
C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.html

نحن بحاجة أيضا عرض و جهة نظر نموذج ل عن الصفحة.

C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.js
C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.html

ملاحظة - يمكنك أيضًا إنشاء جميع المجلدات المذكورة أعلاه يدويًا.

الخطوة 2 - الصفحات

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

home.html

<template>
   <h1>HOME</h1>
</template>

home.js

export class Home {}

about.html

<template>
   <h1>ABOUT</h1>
</template>

about.js

export class About {}

الخطوة 3 - جهاز التوجيه

سوف نقوم بإنشاء عرض نموذج ل جهاز التوجيه داخل app.js الملف.

app.js

export class App {
   configureRouter(config, router) {
      config.title = 'Aurelia';
		
      config.map([
         { route: ['','home'],  name: 'home',  
            moduleId: './components/home/home',  nav: true, title:'Home' },
         { route: 'about',  name: 'about',
            moduleId: './components/about/about',    nav: true, title:'About' }
      ]);

      this.router = router;
   }
}

سيتم وضع عرض جهاز التوجيه الخاص بنا في app.html .

app.html

<template>
   <nav>
      <ul>
         <li repeat.for = "row of router.navigation">
            <a href.bind = "row.href">${row.title}</a>
         </li>
      </ul>
   </nav>	
   <router-view></router-view>
</template>

عندما نقوم بتشغيل التطبيق ، يمكننا تغيير المسارات عن طريق النقر فوق الصفحة الرئيسية أو حول الروابط.

Aurelia - Reference أوريليا - مرجع

 Aurelia - Reference أوريليا - مرجع

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

الجدول المرجعي

الأب رقم	المثال والوصف
1	المرجع = "myRef" يستخدم لإنشاء مرجع لعنصر DOM.
2	attribute-name.ref = "myRef" يُستخدم لإنشاء مرجع إلى نموذج عرض السمة المخصصة.
3	view-model.ref = "myRef يُستخدم لإنشاء مرجع إلى نموذج عرض العنصر المخصص.
4	view.ref = "myRef" يستخدم لإنشاء مرجع لطبعة عرض العناصر المخصصة.
5	rcontroller.ref = "myRef" يُستخدم لإنشاء مرجع لمثيل وحدة تحكم العنصر المخصص.

في المثال التالي ، سننشئ مرجعًا لعنصر الإدخال . سوف نستخدم صيغة الفصل الافتراضية كنموذج عرض .

app.js

export class App { }    

نقوم بإنشاء مرجع إلى عنصر الإدخال عن طريق إضافة سمة ref = "name" .

app.html

<template>
   <input type = "text" ref = "name"><br/>
   <h3>${name.value}</h3>
</template>    

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

Aurelia - HTTP أوريليا - HTTP

 Aurelia - HTTP أوريليا - HTTP

في هذا الفصل ، ستتعلم كيفية التعامل مع طلبات HTTP في إطار عمل Aurelia.

الخطوة 1 - إنشاء عرض

دعنا ننشئ أربعة أزرار سيتم استخدامها لإرسال الطلبات إلى API الخاص بنا.

app.html

<template>
   <button click.delegate = "getData()">GET</button>
   <button click.delegate = "postData()">POST</button>
   <button click.delegate = "updateData()">PUT</button>
   <button click.delegate = "deleteData()">DEL</button>
</template>

الخطوة 2 - إنشاء نموذج عرض

لإرسال الطلبات إلى الخادم ، توصي Aurelia بإحضار العميل. نحن نقوم بإنشاء وظائف لكل الطلبات التي نحتاجها (GET و POST و PUT و DELETE).

import 'fetch';
import {HttpClient, json} from 'aurelia-fetch-client';

let httpClient = new HttpClient();

export class App {
   getData() {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
   myPostData = { 
      id: 101
   }
	postData(myPostData) {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts', {
         method: "POST",
         body: JSON.stringify(myPostData)
      })
		
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
   myUpdateData = {
      id: 1
   }
	updateData(myUpdateData) {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1', {
         method: "PUT",
         body: JSON.stringify(myUpdateData)
      })
		
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
   deleteData() {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1', {
         method: "DELETE"
      })
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
}

يمكننا تشغيل التطبيق والنقر فوق أزرار GET و POST و PUT و DEL على التوالي. يمكننا أن نرى في وحدة التحكم أن كل طلب يتم بنجاح ، ويتم تسجيل النتيجة.

Aurelia - Forms أوريليا - أشكال او النماذج

 Aurelia - Forms أوريليا - أشكال او النماذج

في هذا الفصل ، ستتعلم كيفية استخدام النماذج في إطار عمل Aurelia.

إدخال النص

أولاً ، سنرى كيفية إرسال نموذج الإدخال . سيحتوي العرض على نموذجي إدخال لاسم المستخدم وكلمة المرور. سنستخدم value.bind لربط البيانات.

app.html

<template>  
   <form role = "form" submit.delegate = "signup()">
      
      <label for = "email">Email</label>
      <input type = "text" value.bind = "email" placeholder = "Email">

      <label for = "password">Password</label>
      <input type = "password" value.bind = "password" placeholder = "Password">

      <button type = "submit">Signup</button>
   </form>
</template>

ستأخذ وظيفة التسجيل فقط قيم اسم المستخدم وكلمة المرور من المدخلات وتسجيلها في وحدة تحكم المطور.

export class App {
   email = '';
   password = '';

   signup() {
      var myUser = { email: this.email, password: this.password }
      console.log(myUser);
   };
}

خانة اختيار

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

app.html

<template>
   <form role = "form" submit.delegate = "submit()">
   
      <label for = "checkbox">Checkbox</label>
      <input type = "checkbox" id = "checkbox" checked.bind = "isChecked"><br/>
      <button type = "submit">SUBMIT</button>
      
   </form>
</template>

سيؤدي إرسال النموذج فقط إلى تسجيل القيمة المحددة في وحدة التحكم.

app.js

export class App  {
   constructor() {
      this.isChecked = false;
   }
   submit() {
      console.log("isChecked: " + this.isChecked);
   }
}

أزرار الراديو

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

app.html

<template>
   <form role = "form" submit.delegate = "submit()">
	
      <label repeat.for = "option of options">
         <input type = "radio" name = "myOptions" 
            model.bind = "option" checked.bind = "$parent.selectedOption"/>
            ${option.text}
      </label>
      <br/>
		
      <button type = "submit">SUBMIT</button>
   </form>
</template>

في نموذج العرض الخاص بنا ، سنقوم بإنشاء مصفوفة من الكائنات this.options وتحديد أن زر الاختيار الأول محدد. مرة أخرى ، سيقوم الزر SUBMIT بتسجيل الدخول إلى وحدة التحكم التي يتم تحديد زر الاختيار فيها.

app.js

export class PeriodPanel {
   options = [];
   selectedOption = {};

   constructor() {
      this.options = [
         {id:1, text:'First'}, 
         {id:2, text:'Second'}, 
         {id:3, text:'Third'}
      ]; 
      this.selectedOption = this.options[0];
   }
   submit() {
      console.log('checked: ' + this.selectedOption.id);
   }
}

إذا تحققنا من زر الاختيار الثالث وقمنا بإرسال النموذج الخاص بنا ، فستظهره وحدة التحكم.