Computed Properties ব্যবহার করে ডেটা ম্যানিপুলেশন

Computed Properties হল Ember.js-এর একটি শক্তিশালী বৈশিষ্ট্য যা আপনার মডেল বা কন্ট্রোলার থেকে ডেটার উপর ভিত্তি করে অটোমেটিক্যালি একটি নতুন মান তৈরি করতে সহায়ক। এটি বিশেষভাবে ব্যবহার করা হয় যখন ডেটা বা ভিউতে কিছু পরিবর্তন করতে হয়, তবে সেগুলির জন্য নতুন মান গণনা করা প্রয়োজন।

Computed Properties কী?

Ember.js-এ Computed Properties এমন প্রপার্টি যা নির্দিষ্ট অন্য প্রপার্টি বা ডেটার উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে মান গণনা করে। এটি আপনাকে ডেটা ম্যানিপুলেশন সহজ এবং আরও কার্যকরভাবে করতে সাহায্য করে।

Computed Property যখনই নির্ভরশীল ডেটার মান পরিবর্তন হয়, তখন তা আপনার কম্পিউটেড প্রপার্টি কে আপডেট করে। এটি একটি গুরুত্বপূর্ণ ফিচার কারণ আপনি নির্দিষ্ট ভ্যালুতে পরিবর্তন ছাড়াই এটি রাখতে পারেন এবং অ্যাপ্লিকেশন আরো দক্ষভাবে চলবে।

Ember.js-এ Computed Property ব্যবহার

Ember.js-এ @computed ডেকোরেটর ব্যবহার করে আপনি কম্পিউটেড প্রপার্টি তৈরি করতে পারেন। আপনি যে প্রপার্টি বা ডেটার উপর নির্ভরশীলতার ভিত্তিতে কম্পিউটেড প্রপার্টি তৈরি করবেন, সেইগুলিকে @computed ট্যাগের মাধ্যমে সংজ্ঞায়িত করা হয়।

Computed Property এর উদাহরণ

ধরা যাক, আমাদের কাছে একটি মডেল রয়েছে যেখানে একজন ব্যক্তির প্রথম নাম এবং শেষ নাম রয়েছে, এবং আমরা তাদের পূর্ণ নাম একটি কম্পিউটেড প্রপার্টির মাধ্যমে গণনা করতে চাই।

১. Model Example

// app/models/person.js
import Model, { attr } from '@ember-data/model';
import { computed } from '@ember/object';

export default class PersonModel extends Model {
  @attr('string') firstName;
  @attr('string') lastName;

  @computed('firstName', 'lastName')
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

এখানে @computed ডেকোরেটর ব্যবহার করে fullName নামক একটি কম্পিউটেড প্রপার্টি তৈরি করা হয়েছে, যা firstName এবং lastName প্রপার্টির উপর নির্ভরশীল। যখন firstName বা lastName পরিবর্তিত হবে, তখন fullName স্বয়ংক্রিয়ভাবে আপডেট হবে।

২. Controller Example

// app/controllers/application.js
import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  firstName = 'John';
  lastName = 'Doe';

  @action
  changeName() {
    this.firstName = 'Jane';
    this.lastName = 'Smith';
  }
}

এখানে আমরা firstName এবং lastName দুটি প্রপার্টি সেট করেছি, এবং changeName অ্যাকশনটি ব্যবহার করে তাদের মান পরিবর্তন করতে পারি।

৩. Template Example

<!-- app/templates/application.hbs -->
<h1>Full Name: {{fullName}}</h1>
<button {{on "click" this.changeName}}>Change Name</button>

এখানে, টেমপ্লেটে fullName কম্পিউটেড প্রপার্টি ব্যবহার করা হয়েছে। যখন firstName বা lastName পরিবর্তিত হবে, তখন fullName স্বয়ংক্রিয়ভাবে আপডেট হয়ে টেমপ্লেটে প্রদর্শিত হবে।

Computed Properties-এর অন্যান্য ব্যবহার

১. Conditional Computed Property

আপনি যখন একটি প্রপার্টির মান নির্ভরশীল করবেন, তখন আপনি @computed ডেকোরেটরের মধ্যে কিছু কন্ডিশনাল লজিক যোগ করতে পারেন। উদাহরণস্বরূপ, ধরুন আমরা একটি কম্পিউটেড প্রপার্টি তৈরি করতে চাই যা যাচাই করবে যদি ব্যবহারকারীর বয়স 18 বছরের বেশি হয়।

// app/models/user.js
import Model, { attr } from '@ember-data/model';
import { computed } from '@ember/object';

export default class UserModel extends Model {
  @attr('number') age;

  @computed('age')
  get isAdult() {
    return this.age >= 18;
  }
}

এখানে isAdult কম্পিউটেড প্রপার্টি age এর উপর ভিত্তি করে তৈরি করা হয়েছে এবং এটি যাচাই করবে যে ব্যবহারকারীর বয়স ১৮ বছরের বেশি কি না।

২. Complex Computed Properties

আপনি একাধিক প্রপার্টি থেকে একটি নতুন মান তৈরি করতে পারেন এবং সেই মানকে @computed ডেকোরেটরের মাধ্যমে নির্ধারণ করতে পারেন।

// app/models/product.js
import Model, { attr } from '@ember-data/model';
import { computed } from '@ember/object';

export default class ProductModel extends Model {
  @attr('number') price;
  @attr('number') discount;

  @computed('price', 'discount')
  get discountedPrice() {
    return this.price - (this.price * (this.discount / 100));
  }
}

এখানে discountedPrice কম্পিউটেড প্রপার্টি price এবং discount এর উপর ভিত্তি করে ডিসকাউন্টেড প্রাইস গণনা করছে।

Computed Properties এর সুবিধা

1. স্বয়ংক্রিয় আপডেট: যদি আপনার অ্যাপ্লিকেশনে একটি প্রপার্টি পরিবর্তিত হয়, তবে কম্পিউটেড প্রপার্টি স্বয়ংক্রিয়ভাবে আপডেট হয়ে যাবে।
2. ডেটা ম্যানিপুলেশন সহজ: কম্পিউটেড প্রপার্টি ব্যবহার করে আপনি সহজেই ডেটা ম্যানিপুলেশন করতে পারবেন, যেমন যোগ, বিয়োগ, গুন, ভাগ ইত্যাদি।
3. ভিউ এবং লজিকের বিচ্ছিন্নতা: কম্পিউটেড প্রপার্টি লজিক এবং ভিউয়ের মধ্যে সঠিক বিচ্ছিন্নতা বজায় রাখে, যা কোডকে আরও পরিষ্কার এবং মেইনটেইনযোগ্য করে তোলে।

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