Aurelia - Binding Behavior أوريليا سلوك الربط

 Aurelia - Binding Behavior أوريليا سلوك الربط

في هذا الفصل سوف تتعلم كيفية استخدام السلوكيات . يمكنك التفكير في سلوك الربط كعامل تصفية يمكنه تغيير بيانات الربط وعرضها بتنسيق مختلف.

خنق

يتم استخدام هذا السلوك لتعيين عدد مرات حدوث بعض التحديثات الملزمة. يمكننا استخدام الخانق لإبطاء معدل تحديث نموذج عرض الإدخال. تأمل المثال من الفصل الأخير. المعدل الافتراضي هو 200 مللي ثانية . يمكننا تغيير ذلك إلى 2 ثانية عن طريق إضافة & throttle: 2000 إلى مدخلاتنا.

app.js

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

app.html

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

تنازل

debounce هو نفس الخانق تقريبًا . الاختلاف هو أن debounce سيحدث الربط بعد أن يتوقف المستخدم عن الكتابة. سيقوم المثال التالي بتحديث الربط إذا توقف المستخدم عن الكتابة لمدة ثانيتين.

app.js

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

app.html

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

مره واحده

OneTime هو السلوك الأكثر كفاءة من حيث الأداء. يجب عليك دائمًا استخدامه عندما تعلم أنه يجب ربط البيانات مرة واحدة فقط.

app.js

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

app.html

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

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