آموزش تاریخچه در برنامه نویسی اورلیا

saber

4 سال پیش

امتیاز دهید post

آموزش تاریخچه در برنامه نویسی اورلیا

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش تاریخچه در برنامه نویسی اورلیا خواهیم پرداخت.

در این درس، شما می آموزید که چگونه از پلاگین aurelia-history استفاده کنید.

مرحله 1 – پلاگین را نصب کنید

این افزونه از قبل به عنوان بخشی از پیکربندی استاندارد در دسترس است. اگر ()aurelia.use.standardConfiguration را به عنوان بخشی از پیکربندی دستی تنظیم کرده اید ، آماده شروع هستید.

main.js

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

   aurelia.start().then(() =&gt; aurelia.setRoot());
}

export function configure(aurelia) {

aurelia.use

.standardConfiguration()

.developmentLogging();

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

}

مرحله 2 – استفاده از تاریخچه

اگر بخواهیم قابلیت حرکت به عقب یا جلو را تنظیم کنیم ، می توانیم از شی history با روش های ()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();
   }
}

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

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

<nav>

<ul>

<a href.bind = "row.href">${row.title}</a>

</li>

</ul>

</nav>

//The button used for navigationg back...

//The button used for navigationg forward...

<router-view></router-view>

</template>

کاربران می توانند با کلیک روی دکمه های اضافه شده به عقب و جلو حرکت کنند

Aurelia History Example

منبع.

لیست جلسات قبل آموزش برنامه نویسی اورلیا

امتیاز دهید post

نویسنده مطلب saber

آموزش تاریخچه در برنامه نویسی اورلیا

آموزش تاریخچه در برنامه نویسی اورلیا

مرحله 1 – پلاگین را نصب کنید

main.js

مرحله 2 – استفاده از تاریخچه

app.js

app.html

لیست جلسات قبل آموزش برنامه نویسی اورلیا

دیدگاه شما

بدون دیدگاه

آموزش تاریخچه در برنامه نویسی اورلیا

مرحله 1 – پلاگین را نصب کنید

main.js

مرحله 2 – استفاده از تاریخچه

app.js

app.html

لیست جلسات قبل آموزش برنامه نویسی اورلیا

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه