Aurelia - Data Binding أوريليا - ربط البيانات

Aurelia لديها نظام ربط البيانات الخاص بها. في هذا الفصل ، ستتعلم كيفية ربط البيانات مع Aurelia ، وستشرح أيضًا آليات الربط المختلفة.

ربط بسيط

لقد رأيت بالفعل ارتباطًا بسيطًا في بعض فصولنا السابقة. يستخدم بناء جملة $ {...} لربط عرض veiw وعرضه.

app.js

export class App {  
   constructor() {
      this.myData = 'Welcome to Aurelia app!';
   }
}

app.html

<template>
   <h3>${myData}</h3>
</template>

اتجاهين ملزم

جمال Aurelia في بساطته. يتم تعيين ربط البيانات ثنائي الاتجاه تلقائيًا ، عندما نربط حقول الإدخال

app.js

export class App {  
   constructor() {
      this.myData = 'Enter some text!';
   }
}

app.html

<template>
   <input id = "name" type = "text" value.bind = "myData" />
   <h3>${myData}</h3>
</template>

الآن ، لدينا نموذج العرض والعرض مرتبطان. كلما أدخلنا بعض النص داخل حقل الإدخال ، سيتم تحديث العرض.