Polymer ফ্রেমওয়ার্কে Attributes এবং Properties এর মাধ্যমে ডেটা পাস করা একটি গুরুত্বপূর্ণ কনসেপ্ট যা আপনাকে কাস্টম উপাদানগুলো (custom elements) এর মধ্যে ডেটা আদান-প্রদান করতে সহায়ক। Polymer এর মাধ্যমে ওয়েব কম্পোনেন্ট তৈরি করার সময় আপনি বিভিন্ন ধরনের ডেটা পাস করতে পারেন—যেমন HTML অ্যাট্রিবিউট বা কাস্টম উপাদানগুলির প্রপার্টি ব্যবহার করে।
১. Attributes:
Attributes হল HTML ট্যাগের বৈশিষ্ট্য, যা ব্রাউজারে একটি স্ট্রিং মান হিসেবে থাকে। Polymer দিয়ে আপনি কাস্টম উপাদানগুলিতে অ্যাট্রিবিউট ব্যবহার করতে পারেন, এবং এগুলির মাধ্যমে ডেটা পাস করা হয়। তবে, এক্ষেত্রে একটি সীমাবদ্ধতা রয়েছে—অ্যাট্রিবিউটগুলি সাধারণত স্ট্রিং টাইপের মান ধারণ করে এবং সেই মানটি JavaScript বা Polymer কোডে অ্যাক্সেস করার সময় এটি একটি স্ট্রিং হিসাবে থাকবে।
Attribute ব্যবহার:
Polymer এ অ্যাট্রিবিউটগুলির মাধ্যমে ডেটা পাস করার জন্য, সাধারণত HTML ট্যাগের মধ্যে অ্যাট্রিবিউট হিসেবে মান নির্ধারণ করা হয়, এবং সেই মানটি পরবর্তীতে JavaScript কোডে ব্যবহার করা হয়।
উদাহরণ:
<dom-module id="my-element">
<template>
<p>The value of the attribute is: {{message}}</p>
</template>
<script>
Polymer({
is: 'my-element',
properties: {
message: {
type: String,
value: 'Hello, world!'
}
},
ready: function() {
this.message = this.getAttribute('message') || 'Default message';
}
});
</script>
</dom-module>
এখানে message অ্যাট্রিবিউটকে কাস্টম উপাদানের মধ্যে ডেটা হিসেবে পাস করা হচ্ছে। যদি message অ্যাট্রিবিউট HTML ট্যাগে দেওয়া হয়, তবে সেটি Polymer উপাদানটির প্রপার্টি হিসেবে সেট হয়ে যাবে।
<my-element message="Hello from Attribute"></my-element>
এই উদাহরণে, "Hello from Attribute" মানটি message প্রপার্টিতে সেট হবে এবং এটি ডম-টেমপ্লেটে প্রদর্শিত হবে।
২. Properties:
Properties হল JavaScript অবজেক্ট বা Polymer উপাদানগুলির বৈশিষ্ট্য, এবং এগুলি অনেক বেশি ফ্লেক্সিবল। Properties আপনি আপনার কাস্টম উপাদানগুলিতে ডেটা পাস করতে ব্যবহার করতে পারেন, এবং এগুলি স্ট্রিং, নাম্বার, অবজেক্ট ইত্যাদি যেকোনো ধরনের ডেটা ধারণ করতে সক্ষম।
Polymer এ প্রপার্টি ব্যবহার করলে ডেটা দুটি উপাদানের মধ্যে সহজেই সিঙ্ক্রোনাইজ করা যায় এবং এটি স্ট্রিং না হয়ে বিভিন্ন ধরনের ডেটা টাইপ সাপোর্ট করে।
Property ব্যবহার:
Polymer এ প্রপার্টির মাধ্যমে ডেটা পাস করার জন্য, আপনাকে প্রপার্টির মান পরিবর্তন করলে তা উপাদানে রেন্ডার হতে থাকবে। এবং আপনি ডেটা পাস করতে this.set('property', value) ফর্ম্যাটও ব্যবহার করতে পারেন।
উদাহরণ:
<dom-module id="my-element">
<template>
<p>The value of the property is: {{message}}</p>
</template>
<script>
Polymer({
is: 'my-element',
properties: {
message: {
type: String,
value: 'Hello, world!'
}
}
});
</script>
</dom-module>
এখানে, message একটি property হিসেবে ডিফাইন করা হয়েছে। এর মান value: 'Hello, world!' দ্বারা সেট করা হয়েছে। আপনি যদি এই প্রপার্টি পরিবর্তন করেন, তা অবিলম্বে UI তে প্রতিফলিত হবে।
<my-element></my-element>
<script>
var element = document.querySelector('my-element');
element.message = 'Updated message!';
</script>
এই কোডে message প্রপার্টির মান পরিবর্তন হলে তা UI তে আপডেট হবে এবং ব্যবহারকারীর কাছে "Updated message!" প্রদর্শিত হবে।
Attributes এবং Properties এর মধ্যে পার্থক্য:
- Attributes হল HTML উপাদানের অংশ, যা ব্রাউজারে সরাসরি স্ট্রিং হিসেবে থাকে। এগুলো DOM-এ অ্যাক্সেস করা সহজ হলেও JavaScript-এ স্ট্রিং বা অন্যান্য মানে রূপান্তর করতে হয়।
- Properties হল JavaScript অবজেক্টের অংশ, যেগুলি কাস্টম উপাদানগুলির প্রপার্টি হিসেবে কাজ করে। এগুলির মাধ্যমে আপনি যেকোনো ডেটা টাইপের মান ধারণ করতে পারেন (যেমন স্ট্রিং, নাম্বার, অবজেক্ট) এবং সহজেই পরিবর্তন করতে পারেন।
Polymer ফ্রেমওয়ার্কে Attributes এবং Properties দিয়ে ডেটা পাস করার মাধ্যম দুটি গুরুত্বপূর্ণ টুল যা আপনাকে কাস্টম উপাদানগুলির মধ্যে ডেটা আদান-প্রদান করতে সহায়তা করে। Attributes সহজ, স্ট্রিং-ভিত্তিক মান ধারণ করে, এবং Properties বেশি ফ্লেক্সিবল, যেগুলি আরও জটিল ডেটা ধারণ করতে সক্ষম।
