Custom ইভেন্ট তৈরি করা

Riot.js-এ Custom Event তৈরি এবং ব্যবহার করা খুবই সহজ। Custom events আপনার কম্পোনেন্টের মধ্যে বিভিন্ন ইন্টারঅ্যাকশন পরিচালনা করতে সাহায্য করে এবং অন্যান্য কম্পোনেন্টের মধ্যে যোগাযোগের জন্য ব্যবহৃত হয়। আপনি একটি কম্পোনেন্টের মধ্যে একটি কাস্টম ইভেন্ট ট্রিগার করতে পারেন এবং সেই ইভেন্টটিকে অন্য কম্পোনেন্টে শোনার জন্য (listen) ব্যবহার করতে পারেন।

Custom Event তৈরি করার পদ্ধতি

Riot.js-এ Custom Event তৈরি করার জন্য আপনি riot.observable() বা this.trigger() ব্যবহার করতে পারেন। চলুন, দুটি উপায়েই কাস্টম ইভেন্ট তৈরি করার পদ্ধতি দেখে নেই।

১. this.trigger() ব্যবহার করে Custom Event তৈরি করা

Riot.js এর কম্পোনেন্টের মধ্যে একটি ইভেন্ট তৈরি করতে this.trigger() ব্যবহার করা হয়। আপনি এটি একটি নির্দিষ্ট ইভেন্টের জন্য ট্রিগার করতে পারেন, এবং সেই ইভেন্টটি অন্য কম্পোনেন্টে শোনা (listen) যেতে পারে।

উদাহরণ:

<!-- MyComponent.riot -->
<my-component>
  <h1>{opts.title}</h1>
  <p>{message}</p>
  <button onclick={changeMessage}>Change Message</button>

  <script>
    export default {
      onMounted() {
        this.message = 'Hello, World!';
      },

      changeMessage() {
        this.message = 'Message changed!';

        // Custom Event Triggering
        this.trigger('messageChanged', this.message);
      }
    }
  </script>
</my-component>

এখানে, changeMessage ফাংশনে this.trigger('messageChanged', this.message) ব্যবহার করে একটি কাস্টম ইভেন্ট 'messageChanged' ট্রিগার করা হচ্ছে এবং সেটি message পাঠানো হচ্ছে।

২. অন্য কম্পোনেন্টে Custom Event শোনা (Listen)

এখন, আপনাকে সেই কাস্টম ইভেন্টটি অন্য কম্পোনেন্টে শোনার (listen) জন্য সেটআপ করতে হবে। আপনি riot.mount ব্যবহার করে একটি কম্পোনেন্ট মাউন্ট করলে on মেথডের মাধ্যমে ইভেন্টটি শোনতে পারবেন।

উদাহরণ:

<!-- AnotherComponent.riot -->
<another-component>
  <h2>Received Message: {receivedMessage}</h2>

  <script>
    export default {
      onMounted() {
        // Shorthand for listening to custom events
        this.on('messageChanged', (newMessage) => {
          this.receivedMessage = newMessage;
        });
      }
    }
  </script>
</another-component>

এখানে, this.on('messageChanged', ...) দিয়ে 'messageChanged' কাস্টম ইভেন্টটি শোনা হচ্ছে এবং যখন ইভেন্টটি ট্রিগার হবে, তখন তা newMessage প্যারামিটার সহ কম্পোনেন্টে পৌঁছাবে।

৩. কাস্টম ইভেন্ট ইন্টারকম কমিউনিকেশন

আপনি যদি একটি কাস্টম ইভেন্ট একটি কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে পাঠাতে চান, তবে এটি riot.mount() এর মাধ্যমে সহজে করতে পারেন। নিচের উদাহরণে, একটি কম্পোনেন্টের মাধ্যমে ইভেন্ট পাঠানো হচ্ছে এবং অন্য কম্পোনেন্টে এটি শোনা হচ্ছে।

উদাহরণ:

<!-- ParentComponent.riot -->
<parent-component>
  <my-component title="Riot.js Component"></my-component>
  <another-component></another-component>

  <script>
    export default {
      onMounted() {
        this.on('messageChanged', (msg) => {
          this.message = msg;
        });
      }
    }
  </script>
</parent-component>

এখানে, messageChanged ইভেন্টটি প্যারেন্ট কম্পোনেন্টের মাধ্যমে শোনা হচ্ছে এবং msg প্যারামিটারটি this.message-এ সংরক্ষিত হচ্ছে।

৪. Multiple Listeners এবং Custom Event with Options

Riot.js-এ আপনি একাধিক শোনার (listeners) জন্য একই ইভেন্ট ব্যবহার করতে পারেন। এতে আপনি একটি একক ইভেন্টের মাধ্যমে একাধিক কার্যক্রম সম্পাদন করতে পারবেন। এছাড়া, কাস্টম ইভেন্টের সাথে অতিরিক্ত ডেটা বা অপশন পাঠানোও সম্ভব।

উদাহরণ:

<!-- MyComponent.riot -->
<my-component>
  <h1>{opts.title}</h1>
  <button onclick={sendData}>Send Data</button>

  <script>
    export default {
      sendData() {
        // Trigger custom event with additional data
        this.trigger('dataSent', { info: 'Some important data', timestamp: new Date() });
      }
    }
  </script>
</my-component>

এখন, অন্য কম্পোনেন্টে এই ইভেন্ট শোনা হচ্ছে এবং অতিরিক্ত ডেটা গ্রহণ করা হচ্ছে:

<!-- AnotherComponent.riot -->
<another-component>
  <h2>Received Info: {info}</h2>

  <script>
    export default {
      onMounted() {
        this.on('dataSent', (data) => {
          this.info = `Received Data: ${data.info} at ${data.timestamp}`;
        });
      }
    }
  </script>
</another-component>

এখানে, 'dataSent' কাস্টম ইভেন্টটি অতিরিক্ত ডেটা সহ ট্রিগার হচ্ছে এবং অন্য কম্পোনেন্টে সেই ডেটা শোনা হচ্ছে।

Riot.js-এ কাস্টম ইভেন্টের মাধ্যমে আপনি কম্পোনেন্টের মধ্যে এবং বিভিন্ন কম্পোনেন্টের মধ্যে সহজে যোগাযোগ করতে পারবেন। এটি আপনার অ্যাপ্লিকেশনে শক্তিশালী ইন্টারঅ্যাকশন এবং রিয়েকটিভ ফিচার যুক্ত করে, যা UI-এর অভ্যন্তরীণ এবং বাইরের অংশের মধ্যে কার্যকরী যোগাযোগ স্থাপন করতে সাহায্য করে। this.trigger() এবং this.on() পদ্ধতি ব্যবহার করে আপনি কাস্টম ইভেন্ট ট্রিগার এবং শোনার কাজটি খুব সহজে করতে পারেন।