Aurelia - การกำหนดค่า

ในบทนี้เราจะแสดงวิธีกำหนดค่า Aurelia framework ตามความต้องการของคุณ บางครั้งคุณจะต้องตั้งค่าการกำหนดค่าเริ่มต้นหรือเรียกใช้โค้ดก่อนที่แอปจะแสดงผลให้กับผู้ใช้

ขั้นตอนที่ 1 - สร้าง main.js

มาสร้างกันเถอะ main.js ไฟล์ภายใน srcโฟลเดอร์ ภายในไฟล์นี้เราจะกำหนดค่า Aurelia

คุณต้องบอกให้ Aurelia โหลดโมดูลการกำหนดค่าด้วย คุณสามารถดูส่วนที่แสดงความคิดเห็นได้ในตัวอย่างต่อไปนี้

index.html

<!DOCTYPE html>
<html>
   <head>
      <title>Aurelia</title>
      <link rel = "stylesheet" href = "styles/styles.css">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
   </head>

   <body aurelia-app = "main"> 
      <!--Add "main" value to "aurelia-app" attribute... -->
      <script src = "jspm_packages/system.js"></script>
      <script src = "config.js"></script>
		
      <script>
         SystemJS.import('aurelia-bootstrapper');
      </script>
   </body>
</html>

ขั้นตอนที่ 2 - การกำหนดค่าเริ่มต้น

โค้ดด้านล่างแสดงวิธีใช้การกำหนดค่าเริ่มต้น configureฟังก์ชันอนุญาตให้ตั้งค่าการกำหนดค่าด้วยตนเอง เรากำลังตั้งค่าuse คุณสมบัติเพื่อระบุสิ่งที่เราต้องการ

main.js

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

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

ขั้นตอนที่ 3 - การกำหนดค่าขั้นสูง

มีตัวเลือกการกำหนดค่ามากมายที่เราสามารถใช้ได้ บทความนี้อยู่นอกเหนือขอบเขตที่จะแสดงให้คุณเห็นทั้งหมดดังนั้นเราจะอธิบายวิธีการทำงานของการกำหนดค่าตามตัวอย่างต่อไปนี้ โดยพื้นฐานแล้วเรากำลังบอกให้ Aurelia ใช้default data binding language, default resources, development logging, router, history และ event aggregator. นี่คือชุดปลั๊กอินมาตรฐาน

export function configure(aurelia) {
   aurelia.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator();

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

Note - การตั้งค่าเหล่านี้จะอธิบายโดยละเอียดในบทถัดไป