RIOT.js এ if নির্দেশনা ব্যবহার

Riot.js তে if নির্দেশনা ব্যবহার করা হয় UI-তে একটি শর্তাধীন ব্লক রেন্ডার করতে। Riot.js-এ, এটি if নির্দেশনা ও else ব্লক দিয়ে UI-তে শর্ত অনুযায়ী এলিমেন্টের প্রদর্শন নিয়ন্ত্রণ করা যায়।

১. Basic if Conditional Rendering

Riot.js-এ if নির্দেশনা ব্যবহার করার জন্য, {#if condition} এবং {#else} সিনট্যাক্স ব্যবহার করা হয়। এখানে condition হলো একটি শর্ত যা যদি সত্য হয় তবে সংশ্লিষ্ট HTML ব্লকটি রেন্ডার হবে।

উদাহরণ:

<!-- MyComponent.riot -->
<my-component>
  <h1>Welcome to Riot.js</h1>
  
  {#if showMessage}
    <p>This is a conditional message!</p>
  {#else}
    <p>No message to show!</p>
  {/if}
  
  <button onclick={toggleMessage}>Toggle Message</button>

  <script>
    export default {
      onMounted() {
        this.showMessage = true;  // initially showing the message
      },

      toggleMessage() {
        this.showMessage = !this.showMessage;  // Toggle between true and false
      }
    }
  </script>
</my-component>

ব্যাখ্যা:

• {#if showMessage}: যদি showMessage সত্য (true) হয়, তাহলে <p>This is a conditional message!</p> প্রদর্শিত হবে।
• {#else}: যদি showMessage মিথ্যা (false) হয়, তাহলে <p>No message to show!</p> প্রদর্শিত হবে।
• toggleMessage ফাংশনটি showMessage এর মান পরিবর্তন করবে, এবং যখন এটি পরিবর্তিত হবে, তখন UI পুনরায় রেন্ডার হবে।

২. if এবং else ব্যবহার

Riot.js-এ আপনি if এবং else উভয়কেই ব্যবহার করতে পারেন একসাথে। আপনি আরও শর্ত ভিত্তিক if ব্লকগুলি তৈরি করতে পারেন।

উদাহরণ:

<!-- MyComponent.riot -->
<my-component>
  <h1>Welcome to Riot.js</h1>
  
  {#if age >= 18}
    <p>You are an adult.</p>
  {#else if age >= 13}
    <p>You are a teenager.</p>
  {#else}
    <p>You are a child.</p>
  {/if}
  
  <button onclick={increaseAge}>Increase Age</button>

  <script>
    export default {
      onMounted() {
        this.age = 20;  // Initially set age to 20
      },

      increaseAge() {
        this.age += 1;  // Increase age by 1
      }
    }
  </script>
</my-component>

ব্যাখ্যা:

• {#if age >= 18}: যদি age ১৮ বা তার বেশি হয়, তাহলে "You are an adult." বার্তা দেখাবে।
• {#else if age >= 13}: যদি age ১৩ বা তার বেশি হয় কিন্তু ১৮ এর নিচে, তখন "You are a teenager." দেখাবে।
• {#else}: অন্য সব ক্ষেত্রে, "You are a child." বার্তা দেখাবে।
• increaseAge ফাংশন ব্যবহার করে আপনি age পরিবর্তন করতে পারবেন, এবং এর ফলে UI পুনরায় রেন্ডার হবে।

৩. Multiple if Statements

Riot.js-এ আপনি একাধিক শর্তে if ব্লক ব্যবহার করতে পারেন যাতে আপনার কম্পোনেন্ট আরও নমনীয় হয়।

<!-- MyComponent.riot -->
<my-component>
  <h1>Check Your Account Status</h1>
  
  {#if isLoggedIn}
    <p>Welcome back, {userName}!</p>
  {#else if isGuest}
    <p>Welcome, guest. Please log in to enjoy full features.</p>
  {#else}
    <p>You are not logged in. Please sign up!</p>
  {/if}
  
  <button onclick={toggleLogin}>Toggle Login Status</button>

  <script>
    export default {
      onMounted() {
        this.isLoggedIn = false;
        this.isGuest = true;
        this.userName = 'John Doe'; // Sample user name
      },

      toggleLogin() {
        this.isLoggedIn = !this.isLoggedIn;
        this.isGuest = !this.isGuest;
      }
    }
  </script>
</my-component>

ব্যাখ্যা:

• এখানে আপনি তিনটি if ব্লক ব্যবহার করেছেন: একটি লগিন অবস্থার জন্য, একটি গেস্ট অবস্থার জন্য, এবং অন্য কোনো অবস্থার জন্য।
• toggleLogin ফাংশনটি isLoggedIn এবং isGuest এর মান পরিবর্তন করবে এবং UI স্বয়ংক্রিয়ভাবে আপডেট হবে।

৪. if নির্দেশনা ব্যবহার করার সময় কিছু টিপস:

1. সাবধানতার সাথে if ব্যবহারের সময় অনেক শর্ত যোগ করবেন না, কারণ এতে কম্পোনেন্টের রেন্ডারিং জটিল হতে পারে। সম্ভব হলে শর্তগুলিকে সহজ রাখুন।
2. প্রযুক্তিগতভাবে সঠিক কোড লেখা: if এবং else if এর সঠিক ব্যবহার নিশ্চিত করুন। Riot.js তে ব্লকের মাঝে {#else} ব্যবহারের সময় সাবধানতা অবলম্বন করুন।
3. else ব্লক সরবরাহ না করা: যদি আপনার শুধু if ব্লক ব্যবহার করার প্রয়োজন হয়, তবে {#else} ব্যবহার করতে হবে না।

Riot.js-এ if নির্দেশনা দিয়ে শর্তাধীন UI রেন্ডারিং করা অনেক সহজ এবং পরিষ্কার। {#if condition}, {#else}, {#else if} ব্যবহারের মাধ্যমে আপনি ডাইনামিকভাবে UI পরিবর্তন করতে পারবেন এবং এটি ডেটার ভিত্তিতে স্বয়ংক্রিয়ভাবে রেন্ডার হবে।