LWC-তে ইভেন্টগুলি উপাদানগুলির সাথে যোগাযোগ করতে ব্যবহৃত হয়। যদি সংশ্লিষ্ট উপাদান থাকে, তাহলে পিতামাতা থেকে শিশু বা শিশু থেকে পিতামাতার সাথে যোগাযোগ করা সম্ভব হতে পারে। যদি দুটি সম্পর্কহীন উপাদান থাকে, আমরা PubSub (প্রকাশ-সাবস্ক্রাইব) মডেলের মাধ্যমে বা লাইটনিং মেসেজ সার্ভিস (LMS) এর মাধ্যমে যোগাযোগ করতে পারি। এই নির্দেশিকায়, আমরা PubSub মডেল ব্যবহার করে পিতামাতা থেকে শিশু, শিশু থেকে পিতামাতা এবং আন্তঃসম্পর্কিত উপাদানগুলির সাথে কীভাবে যোগাযোগ করতে হয় সে সম্পর্কে আলোচনা করব।
আপনি আপনার রেকর্ড পৃষ্ঠা, অ্যাপ পৃষ্ঠা বা হোম পেজে উপাদানগুলি রাখতে পারেন। আমরা উদাহরণ কোড স্নিপেটের অধীনে এই ফাইলটি (মেটা-এক্সএমএল) আবার নির্দিষ্ট করব না:
xml সংস্করণ = '1.0' ?>
< Lightning ComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57.0 apiVersion >
< উন্মুক্ত হয় > সত্য উন্মুক্ত হয় >
< লক্ষ্য >
< লক্ষ্য > lightning__Recordpage লক্ষ্য >
< লক্ষ্য > lightning__AppPage লক্ষ্য >
< লক্ষ্য > lightning__HomePage লক্ষ্য >
লক্ষ্য >
লাইটনিং কম্পোনেন্ট বান্ডেল >
অভিভাবক থেকে শিশু যোগাযোগ
দুটি উপাদান একে অপরের সাথে সম্পর্কিত হলে, এই যোগাযোগ সম্ভব। এখানে, অভিভাবক সন্তানের কাছে ডেটা পাঠান। পিতামাতার উপাদান শিশু উপাদান ধারণ করে। এই পদ্ধতির সাহায্যে, আমরা পিতামাতা থেকে শিশুর কাছে আদিম ডেটা (পূর্ণসংখ্যা, স্ট্রিং, বুলিয়ান, ইত্যাদি) পাস করতে পারি, অ-আদি ডেটা (অ্যারে, অবজেক্ট, অ্যারে অফ অবজেক্ট, ইত্যাদি) পিতামাতা থেকে শিশুর কাছে পাস করতে পারি, ডেটা পাস করতে পারি পিতামাতার উপর ক্রিয়া সহ শিশু উপাদান।
পিতামাতার সাথে সন্তানের সাথে যোগাযোগ করার জন্য, আমাদের চাইল্ড উপাদানে উপলব্ধ ক্ষেত্র, বৈশিষ্ট্য এবং পদ্ধতিগুলিকে সর্বজনীনভাবে দৃশ্যমান করতে হবে। 'এপিআই' ডেকোরেটর দিয়ে ক্ষেত্র, বৈশিষ্ট্য এবং পদ্ধতিগুলিকে সাজিয়ে এটি সম্ভব হতে পারে।
উদাহরণ : চাইল্ড কম্পোনেন্ট 'js' ফাইলে 'api' সহ একটি ভেরিয়েবল ঘোষণা করুন।
@ api পরিবর্তনশীল ;
এখন, প্যারেন্ট কম্পোনেন্ট এইচটিএমএল ফাইলে এইচটিএমএল অ্যাট্রিবিউটের মাধ্যমে চাইল্ড কম্পোনেন্ট ব্যবহার করে।
উদাহরণ : প্যারেন্ট এইচটিএমএল ফাইলে ভেরিয়েবল ব্যবহার করুন।
< গ - শিশু - comp পরিবর্তনশীল >> গ - শিশু - comp >
আসুন কিছু উদাহরণ আলোচনা করি যা বর্ণনা করে কিভাবে পিতামাতার সাথে সন্তানের সাথে যোগাযোগ করতে হয়।
উদাহরণ 1:
এই মৌলিক উদাহরণটি এমন একটি তথ্য পাওয়ার প্রমাণ দেয় যা পিতামাতার দ্বারা সন্তানের কাছে পাঠানো হয়।
childtComp.js
প্রথমত, আমরা একটি চাইল্ড কম্পোনেন্ট তৈরি করি যা 'তথ্য' ভেরিয়েবল ধারণ করে যা সর্বজনীনভাবে উপলব্ধ।
// api ডেকোরেটর ব্যবহার করে ভেরিয়েবলটিকে সর্বজনীন হিসাবে ঘোষণা করুন@ এপিআই তথ্য
আপনি নিম্নলিখিত স্ক্রিনশটে সম্পূর্ণ 'js' কোডটি দেখতে পারেন:
childtComp.html
এখন, আমরা কেন্দ্র ট্যাগের মধ্যে HTML ফাইলে এই ভেরিয়েবলটি নির্দিষ্ট করি।
< টেমপ্লেট >< বজ্র - কার্ড শিরোনাম = 'শিশু' >
< কেন্দ্র >
< খ > { তথ্য } খ >
কেন্দ্র >
বজ্র - কার্ড >
টেমপ্লেট >
parentComp.js
আমরা 'js' ফাইলে কিছু করছি না।
parentComp.html
কিছু টেক্সট সহ পাবলিক ভেরিয়েবল (তথ্য) পাস করে আপনার প্যারেন্ট এইচটিএমএলে আগের চাইল্ড কম্পোনেন্ট রাখুন।
< টেমপ্লেট >< বজ্র - কার্ড শিরোনাম = 'পিতামাতা' আইকন - নাম = 'মান: অ্যাকাউন্ট' >
< গ - শিশু - comp
তথ্য = 'হ্যালো, আমি তথ্য পেয়েছি ...'
>> গ - শিশু - comp >
বজ্র - কার্ড >
টেমপ্লেট >
আউটপুট:
এখন, আপনার Salesforce Org-এ যান এবং অভিভাবক উপাদানটিকে 'রেকর্ড' পৃষ্ঠায় রাখুন। আপনি দেখতে পাবেন যে শিশু উপাদান পিতামাতার কাছ থেকে তথ্য পেয়েছে।
উদাহরণ 2:
আসুন দুটি ইনপুট টেক্সট ফিল্ড তৈরি করি যা প্যারেন্ট কম্পোনেন্টে UI থেকে ডায়নামিকভাবে টেক্সট গ্রহণ করবে। আমরা যদি প্যারেন্ট কম্পোনেন্টে প্রথম টেক্সট ইনসার্ট করি, চাইল্ড কম্পোনেন্ট বড় হাতের অক্ষরে এই টেক্সটটি পায়। একইভাবে, এটি ছোট হাতের টেক্সট গ্রহণ করে যদি আমরা দ্বিতীয় টেক্সট সন্নিবেশ করি।
childtComp.js
দুটি ভেরিয়েবল তৈরি করুন - তথ্য1 এবং তথ্য2 - একটি ট্র্যাক ডেকোরেটর দিয়ে।
- 'api' ডেকোরেটর দিয়ে convertToUpper() পদ্ধতি তৈরি করুন যা প্রথম ইনপুট টেক্সটকে বড় হাতের অক্ষরে রূপান্তর করে।
- 'api' ডেকোরেটর দিয়ে convertToLower() পদ্ধতিটি তৈরি করুন যা দ্বিতীয় ইনপুট পাঠকে ছোট হাতের অক্ষরে রূপান্তর করে।
@ ট্র্যাক তথ্য2 ;
@ এপিআই
convertToUpper ( বাস্তব তথ্য1 ) {
এই . তথ্য1 = বাস্তব তথ্য1। আপপারকেস থেকে ( ) ;
}
@ এপিআই
convertToLower ( বাস্তব তথ্য1 ) {
এই . তথ্য2 = বাস্তব তথ্য1। ছোট হাতের কাছে ( ) ;
}
সম্পূর্ণ 'js' কোড নিম্নলিখিত মত দেখায়:
childtComp.html
আমরা 'js' ফাইল থেকে আসা মান (Information1 এবং Information2) প্রদর্শন করি।
< টেমপ্লেট >< বজ্র - কার্ড শিরোনাম = 'শিশু' >
আপার কেস :& nbsp ; < খ > { তথ্য1 } খ < br >
লোয়ার কেস :& nbsp ; < খ > { তথ্য2 } খ >
বজ্র - কার্ড >
টেমপ্লেট >
parentComp.js
আমরা দুটি হ্যান্ডলার পদ্ধতি তৈরি করি যা querySelector() এর মাধ্যমে চাইল্ড HTML টেমপ্লেট নির্বাচন করে। নিশ্চিত করুন যে আপনাকে সঠিক পদ্ধতিগুলি পাস করতে হবে যা পাঠ্যটিকে বড় হাতের বা ছোট হাতের অক্ষরে রূপান্তর করে।
handleEvent1 ( ঘটনা ) {এই . টেমপ্লেট . querySelector ( 'c-childt-comp' ) . convertToUpper ( ঘটনা লক্ষ্য . মান ) ;
}
হ্যান্ডেল ইভেন্ট2 ( ঘটনা ) {
এই . টেমপ্লেট . querySelector ( 'c-childt-comp' ) . convertToLower ( ঘটনা লক্ষ্য . মান ) ;
}
সম্পূর্ণ 'js' কোড নিম্নলিখিত মত দেখায়:
parentComp.html
তাদের উভয়ের জন্য হ্যান্ডেল ইভেন্ট সহ একটি ইনপুট পাঠ্য তৈরি করুন। এই প্যারেন্ট কম্পোনেন্টে চাইল্ড কম্পোনেন্ট রাখুন।
< টেমপ্লেট >< বজ্র - কার্ড শিরোনাম = 'পিতামাতা' >
< কেন্দ্র >
< বজ্র - ইনপুট লেবেল = 'ছোট হাতের লেখা লিখুন' পরিবর্তন বিষয়ক = { handleEvent1 } >> বজ্র - ইনপুট >
কেন্দ্র >
< br < br >
< কেন্দ্র >
< বজ্র - ইনপুট লেবেল = 'বড় হাতের লেখা লিখুন' পরিবর্তন বিষয়ক = { হ্যান্ডেল ইভেন্ট2 } >> বজ্র - ইনপুট >
কেন্দ্র >
< br < br < br >
< গ - শিশু - comp >> গ - শিশু - comp >
বজ্র - কার্ড >
টেমপ্লেট >
আউটপুট:
এখন, আপনার Salesforce Org-এ যান এবং অভিভাবক উপাদানটিকে 'রেকর্ড' পৃষ্ঠায় রাখুন।
আপনি UI এ দুটি পাঠ্য ইনপুট দেখতে পাবেন।
আসুন প্রথম ইনপুটে কিছু টেক্সট লিখি এবং আপনি দেখতে পাবেন যে টেক্সটটি বড় হাতের অক্ষরে রূপান্তরিত হয়েছে এবং চাইল্ড কম্পোনেন্টে প্রদর্শিত হবে।
দ্বিতীয় ইনপুটে কিছু পাঠ্য লিখুন এবং আপনি দেখতে পাবেন যে পাঠ্যটি ছোট হাতের অক্ষরে রূপান্তরিত হয়েছে এবং চাইল্ড কম্পোনেন্টে প্রদর্শিত হবে।
শিশু থেকে পিতামাতার যোগাযোগ
পূর্ববর্তী যোগাযোগের অনুরূপ, সন্তানকে পিতামাতার সাথে যোগাযোগ করার জন্য, উভয় উপাদান একে অপরের সাথে সম্পর্কিত হওয়া উচিত। আমরা তিনটি ভিন্ন পদ্ধতিতে পিতামাতার সাথে সন্তানের সাথে যোগাযোগ করতে পারি: একটি সাধারণ ইভেন্ট ব্যবহার করে পিতামাতাকে সন্তানের কাছে কল করা এবং ডেটা এবং ইভেন্ট বুদবুদ করার সাথে একটি ইভেন্ট ব্যবহার করে পিতামাতাকে সন্তানের কাছে কল করা। আমরা এই গাইডে সহজ ঘটনাটি দেখব।
সন্তানকে অভিভাবকের সাথে যোগাযোগ করার জন্য, আমাদের ইভেন্টগুলি তৈরি এবং প্রেরণ করতে হবে। তার জন্য একটি কাস্টম ইভেন্ট তৈরি করতে হবে। একটি কাস্টম ইভেন্ট হল একটি ইভেন্ট যা নিজের দ্বারা তৈরি করা হয়। আমরা নতুন কীওয়ার্ড ব্যবহার করে এটি তৈরি করতে পারি। Event_Name যেকোনো কিছু হতে পারে (এটি একটি স্ট্রিং হতে পারে, বড় হাতের অক্ষর বা অঙ্কের বাইরে নয়)। আপাতত, আমরা বিকল্পগুলি নিয়ে আলোচনা করব না।
বাক্য গঠন : নতুন কাস্টম ইভেন্ট ('Event_Name',{options…})
এখন, আপনি কাস্টম ইভেন্ট আছে. পরবর্তী পদক্ষেপ হল ইভেন্টটি প্রেরণ করা। ইভেন্টটি পাঠানোর জন্য, আমাদের ইভেন্টটি নির্দিষ্ট করতে হবে যা আমরা EventTarget.dispatchEvent() পদ্ধতিতে তৈরি করেছি।
বাক্য গঠন : this.displatchEvent(নতুন CustomEvent('Event_Name',{options…})
অবশেষে, আমাদের ঘটনাটি পরিচালনা করতে হবে। এখন, আমাদের আপনার পিতামাতার উপাদানে চাইল্ড কম্পোনেন্টকে কল করতে হবে। আপনার ইভেন্টের নামের সাথে 'চালু' উপসর্গ উল্লেখ করে আপনার ইভেন্টের নাম পাস করুন। এটি ইভেন্ট লিসেনার হ্যান্ডলার নেয়।
বাক্য গঠন:
< গ - শিশু - আপনার ইভেন্টনামের উপাদান = { শ্রোতা হ্যান্ডলার } >> গ - শিশু - উপাদান >উদাহরণ:
এই উদাহরণে, আমরা একটি অভিভাবক উপাদান (উদাহরণ পিতামাতা) এবং দুটি শিশু উপাদান তৈরি করি।
- প্রথম শিশুতে (উদাহরণচাইল্ড), আমরা একটি ইনপুট পাঠ্য তৈরি করি যা ব্যবহারকারীকে কিছু পাঠ্য সরবরাহ করতে দেয়। একই টেক্সট বড় হাতের প্যারেন্ট কম্পোনেন্টে প্রদর্শিত হয়।
- দ্বিতীয় চাইল্ডে (child2), আমরা একটি ইনপুট পাঠ্য তৈরি করি যা ব্যবহারকারীকে কিছু পাঠ্য সরবরাহ করতে দেয়। একই টেক্সট ছোট হাতের প্যারেন্ট কম্পোনেন্টে প্রদর্শিত হয়।
exampleChild.js
আমরা একটি handleChange1 পদ্ধতি তৈরি করি যা লক্ষ্য মান হিসাবে বিশদ বিবরণ সহ “linuxhintevent1” CustomEvent তৈরি করে। এর পরে, আমরা এই ইভেন্টটি প্রেরণ করি। এই 'js' ফাইলে নিম্নলিখিত স্নিপেটটি এম্বেড করুন।
// ঘটনাটি পরিচালনা করুনhandle Change1 ( ঘটনা ) {
ঘটনা প্রতিরোধ ডিফল্ট ( ) ;
const নাম1 = ঘটনা লক্ষ্য . মান ;
const ইভেন্ট 1 নির্বাচন করুন = নতুন কাস্টম ইভেন্ট ( 'linuxhintevent1' , {
বিস্তারিত : নাম1
} ) ;
এই . প্রেরণ ইভেন্ট ( ইভেন্ট 1 নির্বাচন করুন ) ;
}
exampleChild.html
পূর্ববর্তী হ্যান্ডেল পদ্ধতি যা 'js' এ তৈরি করা হয়েছে তা HTML উপাদানের লাইটনিং ইনপুটের উপর ভিত্তি করে পরিচালনা করা হয়।
< টেমপ্লেট >< বজ্র - কার্ড শিরোনাম = 'শিশু 1' >
< div ক্লাস = 'slds-m-round_medium' >
< বজ্র - ইনপুট লেবেল = 'ছোট হাতের লেখা লিখুন' পরিবর্তন বিষয়ক = { handle Change1 } >> বজ্র - ইনপুট >
div >
বজ্র - কার্ড >
টেমপ্লেট >
child2.js
আমরা একটি handleChange2 পদ্ধতি তৈরি করি যা লক্ষ্য মান হিসাবে বিস্তারিত সহ “linuxhintevent2” CustomEvent তৈরি করে। এর পরে, আমরা এই ইভেন্টটি প্রেরণ করি।
handle Change2 ( ঘটনা ) {ঘটনা প্রতিরোধ ডিফল্ট ( ) ;
const নাম2 = ঘটনা লক্ষ্য . মান ;
const ইভেন্ট 2 নির্বাচন করুন = নতুন কাস্টম ইভেন্ট ( 'linuxhintevent2' , {
বিস্তারিত : নাম2
} ) ;
এই . প্রেরণ ইভেন্ট ( ইভেন্ট 2 নির্বাচন করুন ) ;
}
child2.html
পূর্ববর্তী হ্যান্ডেল পদ্ধতি যা 'js' এ তৈরি করা হয়েছে তা HTML উপাদানের লাইটনিং ইনপুটের উপর ভিত্তি করে পরিচালনা করা হয়।
< টেমপ্লেট >< বজ্র - কার্ড শিরোনাম = 'শিশু 2' >
< div ক্লাস = 'slds-m-round_medium' >
< বজ্র - ইনপুট লেবেল = 'বড় হাতের লেখা লিখুন' পরিবর্তন বিষয়ক = { handle Change2 } >> বজ্র - ইনপুট >
div >
বজ্র - কার্ড >
টেমপ্লেট >
exampleParent.js: ক্লাসের ভিতরে আপনার 'js' ফাইলে এই স্নিপেটটি এম্বেড করুন।
- handleEvent1() এ toUpperCase() ফাংশন ব্যবহার করে ইনপুটটিকে বড় হাতের অক্ষরে রূপান্তর করুন এবং তথ্য1 ভেরিয়েবলে সংরক্ষণ করুন
- handleEvent2() এ toLowerCase() ফাংশন ব্যবহার করে ইনপুটটিকে ছোট হাতের অক্ষরে রূপান্তর করুন এবং তথ্য2 ভেরিয়েবলে সংরক্ষণ করুন।
// toUpperCase() ফাংশন ব্যবহার করে ইনপুটটিকে বড় হাতের অক্ষরে রূপান্তর করুন
// handleEvent1() এ এবং Information1 ভেরিয়েবলে সংরক্ষণ করুন
handleEvent1(ইভেন্ট) {
const input1 = event.detail;
this.Information1 = input1.toUpperCase();
}
@ট্র্যাক তথ্য2;
// toLowerCase() ফাংশন ব্যবহার করে ইনপুটটিকে ছোট হাতের অক্ষরে রূপান্তর করুন
// handleEvent2() এ এবং Information2 ভেরিয়েবলে সংরক্ষণ করুন
handleEvent2(ইভেন্ট) {
const input2 = event.detail;
this.Information2 = input2.toLowerCase();
}
exampleParent.html
এখন, দুটি ভেরিয়েবল (তথ্য1 এবং তথ্য2) প্যারেন্ট এইচটিএমএল কম্পোনেন্টে উভয় চাইল্ড কম্পোনেন্ট উল্লেখ করে প্রদর্শন করুন।
<টেমপ্লেট><বিদ্যুৎ-কার্ড শিরোনাম = 'পিতামাতা' >
< div ক্লাস = 'slds-m-round_medium' >
শিশু-1 বড় হাতের বার্তা: < খ > {তথ্য1} < / খ < br >
শিশু-2 ছোট হাতের বার্তা: < খ > {তথ্য2} < / খ < br >
< / খ < br >
< / div >
< / বাজ-কার্ড>
< / টেমপ্লেট>
আউটপুট:
এখন, আপনার Salesforce Org-এ যান এবং অভিভাবক উপাদানটিকে 'রেকর্ড' পৃষ্ঠায় রাখুন।
আপনি দেখতে পাচ্ছেন যে দুটি শিশু উপাদান পিতামাতার মধ্যে বিদ্যমান।
চাইল্ড 1 কম্পোনেন্টের অধীনে ইনপুট টেক্সটে কিছু টেক্সট টাইপ করি। আমরা দেখতে পাচ্ছি যে আমাদের লেখাটি প্যারেন্ট কম্পোনেন্টে বড় হাতের অক্ষরে প্রদর্শিত হয়েছে।
চাইল্ড 2 উপাদানের অধীনে ইনপুট পাঠ্যে কিছু পাঠ্য দিন। আমরা দেখতে পাচ্ছি যে আমাদের টেক্সট প্যারেন্ট কম্পোনেন্টে ছোট হাতের অক্ষরে প্রদর্শিত হয়েছে।
একই সময়ে উভয় পাঠ্য প্রবেশ করাও সম্ভব।
পাবসাব মডেল
আপনি যখন স্বাধীন উপাদানগুলির সাথে কাজ করছেন (একে অপরের সাথে সম্পর্কিত নয়) এবং আপনি যদি একটি উপাদান থেকে অন্য উপাদানে তথ্য পাঠাতে চান, আপনি এই মডেলটি ব্যবহার করতে পারেন। PubSub এর অর্থ হল Publish এবং Subscribe। যে উপাদানটি ডেটা পাঠায় তাকে প্রকাশক বলা হয় এবং যে উপাদানটি ডেটা গ্রহণ করে তাকে সাবস্ক্রাইবার বলা হয়। উপাদানগুলির মধ্যে ইভেন্টগুলি পাঠাতে পাবসাব মডিউল ব্যবহার করতে হবে। এটি ইতিমধ্যেই পূর্বনির্ধারিত এবং Salesforce দ্বারা প্রদত্ত। ফাইলের নাম pubsub. আপনাকে একটি LWC উপাদান তৈরি করতে হবে এবং আপনার জাভাস্ক্রিপ্ট ফাইলে এই কোডটি টাইপ করতে হবে যা 'pubsub.js'।
উদাহরণ:
আসুন দুটি উপাদান তৈরি করি - প্রকাশ করুন এবং সদস্যতা নিন।
প্রকাশনায়, আমরা ব্যবহারকারীদের একটি ইনপুট পাঠ্য তৈরি করার অনুমতি দিই। বোতামে ক্লিক করলে, সাবস্ক্রাইব কম্পোনেন্টে ডেটা বড় হাতের এবং ছোট হাতের অক্ষরে প্রাপ্ত হয়।
publish.js
আপনার JSON ফাইলে এই কোডটি এম্বেড করুন। এখানে, আমরা তথ্য পাই এবং তথ্য প্রকাশ করি।
ইনফরমেশন ভেরিয়েবল হবে বড় হাতের এবং information1 হবে ছোট হাতের। নিশ্চিত করুন যে আপনি কোডের শুরুতে এই আমদানি বিবৃতিটি অন্তর্ভুক্ত করেছেন - 'c/pubsub' থেকে pubsub আমদানি করুন৷
তথ্যতথ্য2
// বড় হাতের এবং ছোট হাতের অক্ষরে তথ্য পান
তথ্য হ্যান্ডলার ( ঘটনা ) {
এই . তথ্য = ঘটনা লক্ষ্য . মান ;
এই . তথ্য2 = ঘটনা লক্ষ্য . মান ;
}
// উভয় তথ্য প্রকাশ করুন (বড় হাতের এবং ছোট হাতের অক্ষরে)
প্রকাশক হ্যান্ডলার ( ) {
পাবসাব প্রকাশ ( 'প্রকাশ করুন' , এই . তথ্য )
পাবসাব প্রকাশ ( 'প্রকাশ করুন' , এই . তথ্য2 )
}
এটা দেখতে হবে:
publish.html
প্রথমত, হ্যান্ডলারের তথ্য সহ পাঠ্য গ্রহণ করার জন্য আমরা লাইটনিং-ইনপুট তৈরি করি। এর পরে, অনক্লিক কার্যকারিতা সহ একটি বোতাম তৈরি করা হয়। এই ফাংশনগুলি পূর্ববর্তী 'js' কোড স্নিপেটে রয়েছে।
<টেমপ্লেট><বিদ্যুৎ-কার্ড শিরোনাম = 'আপনার পাঠ্য প্রকাশ করুন' >
<বিদ্যুৎ-ইনপুট প্রকার = 'পাঠ্য' onkeyup = { তথ্য হ্যান্ডলার } < / বিদ্যুৎ-ইনপুট>
<বিদ্যুৎ-বোতাম অনক্লিক = { প্রকাশক হ্যান্ডলার } লেবেল = 'তথ্য পাঠান' < / বাজ-বোতাম>
< / বাজ-কার্ড>
< / টেমপ্লেট>
subscribe.js
আপনার JSON ফাইলে এই কোডটি এম্বেড করুন। এখানে, আমরা প্রথমে কল সাবস্ক্রাইবার() পদ্ধতিতে তথ্যটিকে বড় হাতের এবং ছোট হাতের অক্ষরে রূপান্তর করে সাবস্ক্রাইব করি। এর পরে, আমরা connectedcallback() পদ্ধতির মাধ্যমে এই পদ্ধতিটি চালু করি। নিশ্চিত করুন যে আপনি কোডের শুরুতে এই আমদানি বিবৃতিটি অন্তর্ভুক্ত করেছেন - 'c/pubsub' থেকে pubsub আমদানি করুন৷
তথ্যতথ্য2
// কল সাবস্ক্রাইবার () আহ্বান করা
সংযুক্ত কলব্যাক ( ) {
এই . কল সাবস্ক্রাইবার ( )
}
// বড় হাতের অক্ষরে রূপান্তর করে তথ্য সাবস্ক্রাইব করুন
কল সাবস্ক্রাইবার ( ) {
পাবসাব সাবস্ক্রাইব ( 'প্রকাশ করুন' , ( তথ্য ) => {
এই . তথ্য = তথ্য আপপারকেস থেকে ( ) ;
} ) ,
// ছোট হাতের অক্ষরে রূপান্তর করে তথ্য সাবস্ক্রাইব করুন
পাবসাব সাবস্ক্রাইব ( 'প্রকাশ করুন' , ( তথ্য2 ) => {
এই . তথ্য2 = তথ্য2. ছোট হাতের কাছে ( ) ;
} )
}
এটিকে ঐটির মত দেখতে হবে:
subscribe.html
আমরা টেক্সট বড় হাতের (তথ্য সংরক্ষিত) এবং ছোট হাতের (তথ্য2 তে সংরক্ষিত) প্রদর্শন করি।
<টেমপ্লেট><বিদ্যুৎ-কার্ড শিরোনাম = 'সাবস্ক্রাইব' >
< div ক্লাস = 'slds-p-round_medium' >
বড় হাতের অক্ষরে প্রাপ্ত তথ্য - < খ > {তথ্য} < / খ < br >
ছোট হাতের অক্ষরে প্রাপ্ত তথ্য - < খ > {তথ্য2} < / খ >
< / div >
< / বাজ-কার্ড>
< / টেমপ্লেট>
আউটপুট:
আপনার পৃষ্ঠায় এই দুটি উপাদান যোগ করুন. নিশ্চিত করুন যে উভয় উপাদান একই পৃষ্ঠায় আছে। অন্যথায়, কার্যকারিতা কাজ করবে না।
আসুন 'প্রকাশ করুন' উপাদানটিতে কিছু পাঠ্য লিখুন এবং 'ডেটা পাঠান' বোতামে ক্লিক করুন। আমরা দেখতে পাচ্ছি যে লেখাটি বড় হাতের এবং ছোট হাতের অক্ষরে গৃহীত হয়েছে।
উপসংহার
এখন, আমরা Salesforce LWC-তে ইভেন্ট ধারণার মাধ্যমে LWC উপাদানগুলির সাথে যোগাযোগ করতে সক্ষম। এই গাইডের অংশ হিসাবে, আমরা শিখেছি কিভাবে পিতামাতা থেকে শিশু এবং শিশু থেকে পিতামাতার সাথে যোগাযোগ করতে হয়। PubSub মডেলটি ব্যবহার করা হয় যদি আপনার উপাদানগুলি একে অপরের সাথে সম্পর্কিত না হয় (পিতামাতা - শিশু নয়)। প্রতিটি দৃশ্যকল্পকে একটি সাধারণ উদাহরণ দিয়ে ব্যাখ্যা করা হয়েছে এবং নিশ্চিত করুন যে আপনি 'মেটা-এক্সএমএল' ফাইলে এই গাইডের শুরুতে দেওয়া কোডটি অন্তর্ভুক্ত করেছেন।