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>

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