BeforeModel, Model, এবং AfterModel Hooks ব্যবহার করা

Ember.js রাউটিং সিস্টেমে বিভিন্ন ধরনের hooks ব্যবহৃত হয়, যার মাধ্যমে আপনি রাউট লোড করার আগে বা পরে নির্দিষ্ট কাজ করতে পারেন। এই hooks গুলি আপনাকে রাউটের মডেল ডেটা ফেচ করতে, রিডাইরেক্ট বা ট্রানজিশন পরিচালনা করতে এবং ডেটা প্রক্রিয়া করতে সহায়ক হয়।

এই তিনটি hooks — beforeModel, model, এবং afterModel — বিশেষভাবে ব্যবহৃত হয় রাউটের লজিক এবং ডেটা ম্যানিপুলেশন নিয়ন্ত্রণ করতে।

beforeModel Hook

beforeModel হল রাউটের প্রথম hook, যা রাউটের model এবং template লোড হওয়ার আগে চলে। আপনি এটি ব্যবহার করে কোনও প্রি-লোডিং কাজ বা চেক করতে পারেন, যেমন ইউজার অথেন্টিকেশন, রিডাইরেক্ট, বা কন্ডিশনাল লজিক।

beforeModel Hook এর ব্যবহার

• কাজ: রাউটের মডেল লোড হওয়ার আগে কিছু অতিরিক্ত কাজ করা (যেমন, ইউজার অথেন্টিকেশন চেক করা)।
• রিটার্ন ভ্যালু: এটি কোনো ডেটা রিটার্ন না করে, সাধারণত মডেল লোড হওয়ার পূর্বে চলতে থাকে।

// app/routes/application.js
import Route from '@ember/routing/route';

export default class ApplicationRoute extends Route {
  beforeModel(transition) {
    // ইউজার অথেন্টিকেশন চেক করা
    if (!this.session.isAuthenticated) {
      // ইউজার লগিন না করলে রিডাইরেক্ট
      this.transitionTo('login');
    }
  }
}

এখানে, beforeModel ব্যবহার করা হয়েছে ইউজার যদি লগইন না করে থাকে, তবে তাকে login রাউটে রিডাইরেক্ট করার জন্য।

model Hook

model হল রাউটের একটি অত্যন্ত গুরুত্বপূর্ণ hook, যেটি রাউট লোড করার সময় ডেটা ফেচ করার জন্য ব্যবহৃত হয়। এটি সাধারণত API কল, ডেটাবেজ থেকে ডেটা ফেচ করার জন্য ব্যবহৃত হয় এবং এটি promise রিটার্ন করে।

model Hook এর ব্যবহার

• কাজ: রাউট লোড হওয়ার সময় ডেটা ফেচ করা বা মডেল রিটার্ন করা।
• রিটার্ন ভ্যালু: সাধারণত এটি একটি মডেল বা promise রিটার্ন করে, যা রাউটের টেমপ্লেটে ডেটা রেন্ডার করার জন্য ব্যবহৃত হয়।

// app/routes/post.js
import Route from '@ember/routing/route';

export default class PostRoute extends Route {
  model(params) {
    // API থেকে পোষ্ট ডেটা ফেচ করা
    return this.store.find('post', params.post_id);
  }
}

এখানে, model() মেথডে params.post_id ব্যবহার করে post মডেলটি ফেচ করা হয়েছে। এই ডেটা রাউটের টেমপ্লেটে রেন্ডার হবে।

afterModel Hook

afterModel hook হল model লোড হওয়ার পরে চলে এবং এটি মডেল লোড করার পরবর্তী কাজ যেমন মডেল বা ডেটার সাথে কোনও অতিরিক্ত লজিক প্রক্রিয়া করার জন্য ব্যবহৃত হয়।

afterModel Hook এর ব্যবহার

• কাজ: মডেল লোড হওয়ার পর অতিরিক্ত কাজ (যেমন, ডেটা প্রক্রিয়া করা বা মডেলটি সংশোধন করা)।
• রিটার্ন ভ্যালু: সাধারণত এটি promise রিটার্ন করে যা model রিটার্নের পরবর্তী কাজ সম্পন্ন করে।

// app/routes/post.js
import Route from '@ember/routing/route';

export default class PostRoute extends Route {
  model(params) {
    return this.store.find('post', params.post_id);
  }

  afterModel(model) {
    // মডেল লোড করার পর কিছু অতিরিক্ত কাজ
    if (!model.isPublished) {
      this.transitionTo('unpublished'); // যদি পোস্টটি পাবলিশ না হয় তবে 'unpublished' রাউটে রিডাইরেক্ট
    }
  }
}

এখানে, afterModel() মেথডটি মডেল লোড করার পর চলে এবং যদি মডেলটির isPublished ফ্ল্যাগ false হয়, তবে এটি unpublished রাউটে রিডাইরেক্ট করবে।

beforeModel, model, এবং afterModel এর মধ্যে পার্থক্য

ব্যবহারিক উদাহরণ

ধরা যাক, আপনি একটি ব্লগ অ্যাপ্লিকেশন তৈরি করছেন, যেখানে পোস্টের ডেটা ফেচ করতে হবে। যদি কোনও পোস্ট published না হয়, তবে unpublished রাউটে রিডাইরেক্ট করতে হবে। এই কাজটি beforeModel, model, এবং afterModel hooks দিয়ে কীভাবে সম্পন্ন হবে তা দেখা যাক।

app/routes/post.js

import Route from '@ember/routing/route';

export default class PostRoute extends Route {
  beforeModel(transition) {
    // এখানে কোন প্রি-কন্ডিশনাল লজিক করা যেতে পারে
    console.log('Before loading the model');
  }

  model(params) {
    // পোস্টের মডেল ফেচ করা
    return this.store.find('post', params.post_id);
  }

  afterModel(model, transition) {
    // মডেল লোড হওয়ার পর পোস্ট যদি পাবলিশ না হয়, তবে রিডাইরেক্ট করা
    if (!model.isPublished) {
      this.transitionTo('unpublished'); // 'unpublished' রাউটে রিডাইরেক্ট
    }
  }
}

এখানে:

• beforeModel: রাউট লোড হওয়ার আগে যে কোনো প্রি-কন্ডিশনাল কাজ করা যেতে পারে।
• model: পোস্টের ডেটা ফেচ করা হচ্ছে।
• afterModel: পোস্টের মডেল লোড হওয়ার পর এটি পরীক্ষা করা হচ্ছে এবং যদি পোস্টটি published না হয় তবে এটি unpublished রাউটে রিডাইরেক্ট করবে।

উপসংহার

Ember.js এর beforeModel, model, এবং afterModel hooks আপনাকে রাউট লোড করার প্রক্রিয়া নিয়ন্ত্রণ করতে সক্ষম করে, যা ডেটা ফেচিং, রাউট ট্রানজিশন এবং প্রি-লোডিং কাজগুলিকে খুব সহজ এবং কার্যকরী করে তোলে। এই hooks গুলির সাহায্যে আপনি অ্যাপ্লিকেশনের নেভিগেশন এবং ডেটা লোডিং এর সম্পূর্ণ নিয়ন্ত্রণ পেতে পারেন।