কাস্টম ডাটাবাইন্ডিং বিহেভিয়ার

Aurelia একটি শক্তিশালী ডাটাবাইন্ডিং সিস্টেম প্রদান করে যা আপনার অ্যাপ্লিকেশনকে ডেটা মডেল এবং UI এর মধ্যে সমন্বয় করতে সাহায্য করে। এটি two-way data binding, one-way data binding এবং property binding সাপোর্ট করে। তবে, আপনি যদি কাস্টম ডাটাবাইন্ডিং বিহেভিয়ার তৈরি করতে চান, তবে Aurelia আপনাকে custom bindings এবং binding behaviors তৈরি করার সুবিধা দেয়।

এখানে কাস্টম ডাটাবাইন্ডিং বিহেভিয়ার (Custom Binding Behavior) তৈরি করার প্রক্রিয়া ব্যাখ্যা করা হলো।

কাস্টম ডাটাবাইন্ডিং বিহেভিয়ার তৈরি করা

Aurelia-তে কাস্টম ডাটাবাইন্ডিং বিহেভিয়ার (Behavior) তৈরি করার জন্য আপনাকে কিছু নির্দিষ্ট ধাপ অনুসরণ করতে হবে। Binding Behavior এবং Binding Command এর মধ্যে পার্থক্য হল, Behavior সাধারণত existing binding-এর আচরণ পরিবর্তন করে, যেখানে Command নতুনভাবে একটি নতুন binding তৈরি করে।

১. Binding Behavior কী?

Binding Behavior হল একটি কাস্টম বৈশিষ্ট্য যা পূর্বনির্ধারিত ডাটাবাইন্ডিং আচরণে একটি নতুন কার্যক্ষমতা যোগ করে। উদাহরণস্বরূপ, আপনি যদি একটি click ইভেন্টে debounce যুক্ত করতে চান, বা কোনও ভ্যালু পরিবর্তন হলে বিশেষ ধরনের ক্যালকুলেশন বা আউটপুট পরিবর্তন করতে চান, তবে আপনি কাস্টম Binding Behavior ব্যবহার করতে পারেন।

২. Custom Binding Behavior তৈরি করা

ধরা যাক, আমরা একটি কাস্টম uppercase বিহেভিয়ার তৈরি করতে চাই, যা ইনপুটের ভ্যালু পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে বড় হাতের অক্ষরে পরিণত করবে। এর জন্য নিম্নলিখিত ধাপগুলি অনুসরণ করা যেতে পারে:

স্টেপ ১: uppercase নামক একটি কাস্টম বিহেভিয়ার তৈরি করা

প্রথমে, একটি uppercase-binding-behavior.js ফাইল তৈরি করুন এবং এতে আপনার কাস্টম বিহেভিয়ার কোড লিখুন।

export class UppercaseBindingBehavior {
  bind(binding, source) {
    // যখন binding প্রথমবার bind হবে, তখন এই ফাংশন কল হবে
    binding.target.value = binding.target.value.toUpperCase();
    binding.target.addEventListener('input', () => {
      binding.target.value = binding.target.value.toUpperCase();
      binding.updateSource();
    });
  }

  unbind(binding, source) {
    // যখন binding unbind হবে, তখন এই ফাংশন কল হবে
    binding.target.removeEventListener('input');
  }
}

স্টেপ ২: বিহেভিয়ার ব্যবহার করা

এখন, এই কাস্টম বিহেভিয়ারটি আপনার app.html বা যেকোনো টেমপ্লেটে ব্যবহার করা যাবে। ধরুন আপনি একটি ইনপুট ফিল্ডে এই বিহেভিয়ার ব্যবহার করতে চান:

<template>
  <input value.bind="name | uppercase">
  <p>Your name in uppercase: ${name}</p>
</template>

এখানে, uppercase বিহেভিয়ারটি ইনপুট ফিল্ডে যুক্ত করা হয়েছে। এতে, যখন আপনি ইনপুটে কিছু টাইপ করবেন, তা স্বয়ংক্রিয়ভাবে বড় হাতের অক্ষরে পরিণত হবে।

৩. Binding Behavior রেজিস্টার করা

কাস্টম বিহেভিয়ার ব্যবহারের জন্য আপনাকে এটি Aurelia Container-এ রেজিস্টার করতে হবে। এটি করার জন্য, main.js ফাইলে নিচের কোডটি যোগ করুন:

import {UppercaseBindingBehavior} from './uppercase-binding-behavior';

export function configure(aurelia) {
  aurelia.globalResources(UppercaseBindingBehavior);
}

এভাবে, আপনি যেকোনো টেমপ্লেটে uppercase বিহেভিয়ার ব্যবহার করতে পারবেন।

৪. অতিরিক্ত কাস্টম বিহেভিয়ার তৈরি করা

Aurelia-তে কাস্টম বিহেভিয়ার তৈরি করা সহজ। আপনি যেকোনো ধরণের বিহেভিয়ার তৈরি করতে পারেন। যেমন:

• Debounce: ইনপুট পরিবর্তন হলে দ্রুত কয়েকবার একই কাজ না হয়ে একসাথে ইভেন্ট ট্রিগার করা।
• Focus: নির্দিষ্ট একটি এলিমেন্টে ফোকাস আনা।
• Format: নম্বর বা ডেটা ফরম্যাট করা।

এগুলির জন্য, আপনার একইভাবে bind এবং unbind ফাংশন তৈরি করতে হবে, যা প্রয়োজনীয় কার্যক্ষমতা যুক্ত করবে।

উপসংহার

Aurelia আপনাকে কাস্টম ডাটাবাইন্ডিং বিহেভিয়ার তৈরি করার মাধ্যমে আপনার অ্যাপ্লিকেশনে অতিরিক্ত কার্যক্ষমতা যোগ করার সুযোগ দেয়। এটি একটি খুবই শক্তিশালী বৈশিষ্ট্য যা আপনাকে UI এবং ডেটা ম্যানিপুলেশনকে আরও দক্ষ এবং গতিশীল করতে সাহায্য করে। কাস্টম বিহেভিয়ার তৈরির মাধ্যমে আপনি event listeners, value transformation এবং অন্যান্য অনেক ধরনের কাস্টম কার্যক্ষমতা যুক্ত করতে পারেন।