├── .gitignore ├── README.md ├── Backbone Models - 101.md ├── bb101p2.md ├── bb101p4.md ├── bb101p3.md ├── bb101p5.md ├── bb101p7.md ├── bb101p6.md ├── index.html ├── bb101p2.html ├── bb101p4.html ├── bb101p3.html ├── bb101p5.html ├── bb101p7.html └── bb101p6.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | learnbackbonejs 2 | =============== 3 | 4 | বাংলায় ব্যাকবোন.জেএসের উপরে কিছু টিউটোরিয়াল 5 | http://hasinhayder.github.io/learnbackbonejs/ 6 | 7 | -------------------------------------------------------------------------------- /Backbone Models - 101.md: -------------------------------------------------------------------------------- 1 | # ব্যাকবোন.জেএস ১০১ 2 | 3 | ব্যাকবোন হল জাভাস্ক্রিপ্ট ডেভেলপারদের জন্য একটা ছোট্ট লাইব্রেরি যা আপনার জাভাস্ক্রিপ্ট বেসড অ্যাপ্লিকেশন গুলো আরও সুন্দর করে লিখতে সাহায্য করে। ব্যাকবোন মূলত ব্যাকবোন মডেল, কালেকশন, রাউটার এবং ভিউ এই কয়েকটি অবজেক্টের সংগ্রহ। এদের সঠিক ব্যবহার একদিকে যেমন আপনার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনটির কোড কমাতে সাহায্য করবে, পাশাপাশি আপনার অ্যাপ্লিকেশনের কোড হবে আগের চেয়ে অনেক এলিগ্যান্ট। আমাদের এই ছোট্ট টিউটোরিয়ালটিতে আমরা বাচকবনের সবগুলো অবজেক্ট নিয়েই আলোচনা করব। তবে প্রথমেই থাকবে ব্যাকবোন মডেল নিয়ে বিস্তারিত 4 | 5 | তো চলুন শুরু করা যাক :) 6 | 7 | [পরবর্তী অংশ: ব্যাকবোন.জেএস প্রজেক্টে সংযুক্ত করা](bb101p2.html) -------------------------------------------------------------------------------- /bb101p2.md: -------------------------------------------------------------------------------- 1 | ## ব্যাকবোন.জেএস আপনার প্রজেক্টে সংযুক্ত করা 2 | 3 | আপনার প্রোজেক্টে ব্যাকবোন সংযুক্ত করতে হলে সবচেয়ে সহজ উপায় হল সিডিএন.জেএসডেলিভার থেকে লাইব্রেরিটি লিংক করা। তবে একটা জিনিস মনে রাখা লাগবে যে ব্যাকবোন.জেএস সঠিক ভাবে কাজ করার জন্য অন্য দুইটি লাইব্রেরি ব্যবহার করে। এদের একটি হল আন্ডারস্কোর.জেএস এবং আরেকটি হল জেকুয়েরি। 4 | 5 | আন্ডারস্কোর.জেএস এর ইউআরএল হল http://underscorejs.org আর জেকুয়েরির ইউআরএল হল http://jquery.com 6 | 7 | মজার বিষয় হল আন্ডারস্কোরের পারফরম্যান্স আরও ভাল করার জন্য জন ডেভিড ডালটন একে নতুন করে লিখে লো-ড্যাশ নামে রিলিজ দিয়েছেন, সাথে যোগ করেছেন আরও নতুন নতুন কিছু ফাংশন। আপনি চাইলে ব্যাকবোনের সাথে আন্ডারস্কোর অথবা লো-ড্যাশ যেটা ইচ্ছা সেটা ব্যবহার করতে পারেন। লো-ড্যাশের ইউআরএল হল https://lodash.com 8 | 9 | আপনার প্রজেক্টে ব্যাকবোন.জেএস নিচের মত করে সংযুক্ত করে নিন। মনে রাখবেন, ভাল ফলাফলের জন্য জাভাস্ক্রিপ্ট লাইব্রেরিগুলো সবসময় `` ট্যাগের ঠিক আগে সংযুক্ত করা বাঞ্ছনীয়। 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | ``` 18 | 19 | [পরবর্তী অংশ: ব্যাকবোন মডেল ব্যবহার শুরু করা ](bb101p3.html) -------------------------------------------------------------------------------- /bb101p4.md: -------------------------------------------------------------------------------- 1 | ##ব্যাকবোন মডেলে মেথড যোগ করা 2 | 3 | এর আগের আর্টিকেলে আমরা দেখেছি কিভাবে কিছু ডিফল্ট ভ্যালু সহ ব্যাকবোন মডেল ইনিশিয়ালাইজ করা যায়। এবার চলুন আমাদের মডেলে কিছু মেথড যোগ করি। নিচের কোডে আমরা `getName()` নামে একটি মেথড যোগ করব যার কাজ হবে আমাদের `person` মডেলের `firstName` এবং `lastName` একসাথে রিটার্ন দেয়া 4 | 5 | ```js 6 | var person = Backbone.Model.extend({ 7 | defaults:{ 8 | firstName: "The", 9 | lastName: "Anonymous", 10 | age: 0 11 | }, 12 | getName: function(){ 13 | return this.get("firstName") + " " + this.get("lastName"); 14 | } 15 | }); 16 | 17 | var p1 = new person({ 18 | firstName:"Aron", 19 | lastName:"Springfield" 20 | }); 21 | 22 | console.log(p1.getName()); 23 | //this will output Aron Springfield 24 | ``` 25 | উপরের কোডে খেয়াল করলে দেখবেন যে আমরা আমাদের `person` মডেলে `getName()` নামে একটি মেথড যোগ করেছি নিচের মত করে। আগেই বলেছি যে ব্যাকবোনের অবজেক্ট গুলো JSON ফরম্যাট এ লেখা হয়, তাই নতুন প্রপার্টি বা মেথড যোগ করতে গেলে কোডের এই স্ট্রাকচার টাই অনুসরণ করা বাঞ্ছনীয়। 26 | 27 | ```js 28 | getName: function(){ 29 | return this.get("firstName") + " " + this.get("lastName"); 30 | } 31 | ``` 32 | 33 | মেথডের ভেতর থেকে বর্তমান অবজেক্টের কোন প্রপার্টি অ্যাক্সেস করতে গেলে সেটা সবসময় `this` কি-ওয়ার্ড দিয়ে করতে হয়। জাভাস্ক্রিপ্টে কোন মেথড এর ভেতরে `this` কি-ওয়ার্ডটি সবসময় যেই অবজেক্টের মাঝে থেকে কল করা হচ্ছে সেই অবজেক্ট এর রেফারেন্স হিসেবে কাজ করে 34 | 35 | আমরা চাইলে `this.get("firstName")` এর বদলে `this.attributes["firstName"]` এভাবেও প্রপার্টির ভ্যালু অ্যাক্সেস করতে পারতাম, কিন্তু সেটা না করাই ভাল। প্রপার্টির ভ্যালু অ্যাক্সেস করতে গেলে সবসময় get() কিংবা set() মেথড দুটো ব্যবহার করা উচিত 36 | 37 | পূর্ববর্তী অংশ: [ব্যাকবোন মডেল ব্যবহার শুরু করা](bb101p3.html) | পরবর্তী অংশ: [মডেলের ডেটা ভ্যালিডেশন](bb101p5.html) -------------------------------------------------------------------------------- /bb101p3.md: -------------------------------------------------------------------------------- 1 | ## ব্যাকবোন মডেল ব্যবহার শুরু করা 2 | 3 | ব্যাকবোন মডেল হল আপনার অ্যাপ্লিকেশনের ডেটা সহজে স্টোর করার জন্য একধরনের অবজেক্ট। জাভাস্ক্রিপ্টে একে লেখা হয় JSON হিসেবে। অন্যান্য ডেটা-স্ট্রাকচার (যেমন অ্যারে) এর মত ব্যাকবোন মডেলের ব্যবহার ও খুবই সহজ। কিন্তু এর বিভিন্ন প্রপার্টি, ইভেন্ট এবং মেথডের সমন্বয়ে এটি পরিণত হয়েছে অত্যন্ত শক্তিশালী এবং উপকারী একটি ডেটা-স্ট্রাকচারে। চলুন দেখি কিভাবে ব্যাকবোন মডেল ইনিশিয়ালাইজ করা যায় 4 | 5 | ```js 6 | var person = Backbone.Model.extend({ 7 | //that's it :) 8 | }); 9 | ``` 10 | উপরের কোডের মাধ্যমে `person` নামে একটি ব্যাকবোন মডেল ইনিশিয়ালাইজ করা হয়েছে। আমরা এতে এক্সট্রা কোন ডেটা বা মেথড যোগ করিনি, জাস্ট ডিফল্ট ব্যাকবোন মডেল অবজেক্ট কে এক্সটেন্ড করেছি। চলুন একে ব্যবহার করা যাক 11 | 12 | ```js 13 | var p1 = new person(); 14 | 15 | p1.set("firstName", "Aron"); 16 | p1.set("lastName", "Strongfield"); 17 | p1set("age", 31); 18 | 19 | //or we can write like this, all at once 20 | 21 | p1.set({ 22 | firstName: "Aron", 23 | lastName: "Strongfield", 24 | age: 31 25 | }); 26 | 27 | console.log(p1.get("firstName"), p1.get("lastName")); 28 | // this will output "Aron Strongfield" 29 | ``` 30 | 31 | ###ব্যাকবোন মডেলে ডিফল্ট ভ্যালু যোগ করা 32 | 33 | আমরা চাইলেই ব্যাকবোন মডেলে ডিফল্ট কিছু ভ্যালু রেখে দিতে পারি। পরবর্তীতে মডেলটি ইনিশিয়ালাইজ করা হলে এই ভ্যালু গুলো সবসময়েই নতুন অবজেক্টটিতে পাওয়া যাবে. চলুন আমরা আগের `person` মডেলটিতে ডিফল্ট ভাবে `age`, `firstName` এবং `lastName` ভ্যালু গুলো যোগ করে একে নতুন ভাবে লিখি 34 | 35 | ```js 36 | var person = Backbone.Model.extend({ 37 | defaults:{ 38 | firstName: "The", 39 | lastName: "Anonymous", 40 | age: 0 41 | } 42 | }); 43 | ``` 44 | 45 | এবার নিচের কোডটুকু রান করুন 46 | 47 | ```js 48 | var p1 = new person(); 49 | console.log(p1.get("firstName"), p1.get("lastName")); 50 | // this will output "The Anonymous" 51 | ``` 52 | 53 | 54 | [পরবর্তী অংশ: ব্যাকবোন মডেলে মেথড যোগ করা](bb101p4.html) -------------------------------------------------------------------------------- /bb101p5.md: -------------------------------------------------------------------------------- 1 | ##ব্যাকবোন মডেলের ডেটা ভ্যালিডেশন 2 | 3 | আপনি চাইলেই আপনার ব্যাকবোন মডেলে চমৎকার করে ডেটা ভ্যালিডেশন যোগ করতে পারেন। এর মাধ্যমে আপনি নিশ্চিত করতে পারবেন যে আপনার মডেলে ভ্যালিড ডেটা এসেছে কিনা। নিচের কোডটুকু দেখুন, এখানে আমরা আমাদের person মডেলে বয়সের উপরে ভ্যালিডেশন যোগ করবো যেন কেউ বয়স হিসেবে নেগেটিভ ভ্যালু কিংবা ০ সেট না করতে পারে 4 | 5 | ```js 6 | var person = Backbone.Model.extend({ 7 | defaults:{ 8 | firstName: "The", 9 | lastName: "Anonymous", 10 | age: 0 11 | }, 12 | getName: function(){ 13 | return this.get("firstName") + " " + this.get("lastName"); 14 | }, 15 | validate:function(attributes, options){ 16 | if(attributes.age<=0){ 17 | return "Invalid age"; 18 | } 19 | } 20 | }); 21 | ``` 22 | 23 | উপরের কোডে দেখবেন যে আমরা `validate()` নামে একটা ফাংশন যোগ করেছি। এই ফাংশনটি মডেলের `isValid()` মেথড অ্যাক্সেস করলে রান করে। এছাড়া মডেল যদি সার্ভারের সাথে সিংক (sync) করে তাহলে মডেলের save() ফাংশন কল করলেও এই `validate` ফাংশনটি রান করে, এবং এরর থাকলে সেটা সার্ভারের সাথে সিংক করে না। এই সিংকের বিষয়টা আমরা পরবর্তীতে দেখব, এখন ভ্যালিডেশন নিয়ে আলোচনা চলুক আপাতত 24 | 25 | `validate` ফাংশন যোগ করার পরে আমরা খুব সহজেই আমাদের মডেলের ডেটা ভ্যালিড কিনা সেটা চেক করতে পারি `isValid()` ফাংশনের সাহায্যে। কোন ভ্যালিডেশন এরর থাকলে সেই এরর টা কি সেটাও আমরা জানতে পারি। নিচের কোডটুকু দেখুন 26 | 27 | ```js 28 | var p1 = new person({ 29 | firstName:"Aron", 30 | lastName:"Springfield" 31 | }); 32 | 33 | p1.set({age:0}); 34 | 35 | if(!p1.isValid()){ 36 | alert (p1.validationError); 37 | //this will output "Invalid age" 38 | } 39 | ``` 40 | আপনি চাইলে মডেলে ডেটা সেট করার সময়ও এই validate ফাংশন টি রান করাতে পারেন। এজন্য মডেলের set() মেথডে একটা এক্সট্রা প্যারামিটার পাঠানো লাগে {validate:true} । নিচের কোডটুকু দেখুন 41 | 42 | এখানে সেট করার সময় ভ্যালিডেশন চেক হয়নি 43 | 44 | ```js 45 | console.log ( p1.set({age:0}) ); 46 | //no validation ran yet. age = 0 47 | ``` 48 | 49 | এখানে সেট করার সময় ভ্যালিডেশন চেক হয়েছে 50 | 51 | ```js 52 | console.log ( p1.set({age:0}, {validate:true}) ); 53 | //output is false, means that validation fails 54 | ``` 55 | 56 | আশাকরি এই ভ্যালিডেশন এর বিষয়টি আপনাদের কাছে পরিষ্কার হয়েছে। 57 | 58 | পূর্ববর্তী অংশ: [ব্যাকবোন মডেলে মেথড যোগ করা](bb101p4.html) | পরবর্তী অংশ: [ব্যাকবোন মডেলের কিছু চমৎকার এবং উপকারী মেথড এর সাথে পরিচিতি](bb101p6.html) 59 | -------------------------------------------------------------------------------- /bb101p7.md: -------------------------------------------------------------------------------- 1 | ## মডেলের ইভেন্ট নিয়ে কাজ করা 2 | ব্যাকবোন মডেল নিয়ে এটা শেষ অংশ আর এখানে আমরা আলোচনা করবো মডেলের ইভেন্ট নিয়ে এবং কিভাবে সেই ইভেন্টের সাথে কোন লিসেনার বাইন্ড করা যায়। নিচের উদাহরণে আমরা firstName এবং lastName এর উপরে দুটি লিসেনার অ্যাটাচ করবো, দুইভাবে 3 | 4 | প্রথম উদাহরণে আমরা দেখব কিভাবে মডেলের কোন ডেটা পরিবর্তন হলে কোন লিসেনার ফাংশন রান করান যায় 5 | 6 | ```js 7 | var person = Backbone.Model.extend({ 8 | defaults: { 9 | firstName: "The", 10 | lastName: "Anonymous", 11 | age: 0 12 | } 13 | }); 14 | 15 | var p1 = new person(); 16 | 17 | p1.on("change", function (model, attributes) { 18 | console.log('something has changed'); 19 | }); 20 | 21 | p1.set("firstName", "Aron"); 22 | //this will trigger the change event, and you will see the console output 23 | 24 | ``` 25 | 26 | উপরের উদাহরণে আপনি দেখলেন যে কিভাবে আমরা মডেলের change ইভেন্টের সাথে একটা ফাংশন বাইন্ড করেছি যাতে মডেলের কোন প্রপার্টি/অ্যাট্রিবিউট পরিবর্তিত হলেই সেই ফাংশনটি রান করে। কিন্তু এখানে আমরা যদি চাই যে নির্দিষ্ট কোন প্রপার্টি / অ্যাট্রিবিউট এর পরিবর্তন হলে আমরা কোন কাজ করব, তাহলে লক্ষ্য করুন নিচের উদাহরণ টি 27 | 28 | ```js 29 | var person = Backbone.Model.extend({ 30 | defaults: { 31 | firstName: "The", 32 | lastName: "Anonymous", 33 | age: 0 34 | } 35 | }); 36 | 37 | var p1 = new person(); 38 | 39 | p1.on("change:lastName", function (model, name) { 40 | console.log('Last Name Changed from ' + model.previous('lastName') + " to " + name); 41 | }); 42 | 43 | p1.set("firstName", "Aron"); 44 | //no event will be fired 45 | 46 | p1.set("lastName", "Springfield"); 47 | //this will trigger the event 48 | //outputs "Last Name Changed from Anonymous to Springfield" 49 | ``` 50 | 51 | উপরের উদাহরণে আপনি দেখবেন যে আমরা lastName এর পরিবর্তনের উপরে একটি ইভেন্ট লিসেনার বাইন্ড করেছি। এর ফলে firstName পরিবর্তন করা হলেও সেটা কোন ইভেন্ট লিসেনার রান করে নি। শুধুমাত্র যখন আমরা lastName সেট করেছি নতুন করে, তখন আমাদের লিসেনার ফাংশনটি রান করেছে 52 | 53 | ব্যাকবোন.জেএস এর বিভিন্ন ইভেন্টের লিস্ট জানতে এই ইউআরএলটি দেখতে পারেন http://backbonejs.org/#Events-catalog 54 | 55 | এই ইউআরএলে গেলে লিস্টে দেখবেন যে মডেলের বেশ কয়েকধরনের ইভেন্ট রয়েছে। ইতোমধ্যেই আমরা change ইভেন্ট টি দেখেছি। এরকম রয়েছে destroy যা কিনা মডেলকে destroy() করলে রান করে। এছাড়া সার্ভার সাইডে যখন আমরা মডেলের ডেটা সিংক করব, তখন আরও কিছু ইভেন্ট রান করে, যেমন "sync", "request", "error" ইত্যাদি 56 | 57 | 58 | 59 | পূর্ববর্তী অংশ: [ব্যাকবোন.জেএস মডেলের কিছু চমৎকার এবং উপকারী মেথড](bb101p6.html) 60 | -------------------------------------------------------------------------------- /bb101p6.md: -------------------------------------------------------------------------------- 1 | ##ব্যাকবোন.জেএস মডেলের কিছু চমৎকার এবং উপকারী মেথড 2 | 3 | এই অংশে আমরা আলোচনা করব ব্যাকবোন.জেএস মডেলের কিছু মেথড নিয়ে যেগুলো বেশ কাজের, এবং ব্যাকবোন নিয়ে কাজ করার সময় অনেক কাজে লাগে। চলুন এক এক করে সেগুলো দেখা যাক 4 | 5 | ## has() 6 | এর সাহায্যে আপনি খুব সহজেই মডেলের চেক করতে পারবেন যে মডেলের কোন প্রপার্টিতে কোন ভ্যালু সেট করা আছে কিনা। 7 | 8 | ```js 9 | if(p1.has("age")){ 10 | console.log("Age = " + p1.get("age")); 11 | } 12 | ``` 13 | 14 | ## toJSON() 15 | 16 | এই মেথডের সাহায্যে আপনি কোন ব্যাকবোন.জেএস মডেলকে JSON অবজেক্টে রূপান্তর করতে পারবেন। নিচের কোড চেক করুন 17 | 18 | ```js 19 | console.log(p1.firstName); 20 | //this will output undefined 21 | 22 | var p1json = p1.toJSON(); 23 | console.log(p1json.firstName); 24 | //this will work :) 25 | ``` 26 | 27 | ## fetch() 28 | 29 | এই মেথডের সাহায্যে আপনি সার্ভার থেকে আপনার মডেলের ডেটা লোড করতে পারবেন। এক্ষেত্রে সার্ভার থেকে অবশ্যই আপনাকে ভ্যালিড JSON ডেটা রিটার্ন করতে হবে। মডেল কোন ইউআরএলে হিট করবে সেটা আপনাকে বলে দিতে হবে urlRoot প্রপার্টির মাধ্যমে। চলুন আমরা দেখি কিভাবে মডেলের save() মেথড টি ব্যবহার করা হয়। 30 | 31 | ```js 32 | var person = Backbone.Model.extend({ 33 | defaults:{ 34 | firstName: "The", 35 | lastName: "Anonymous", 36 | age: 0 37 | }, 38 | getName: function(){ 39 | return this.get("firstName") + " " + this.get("lastName"); 40 | }, 41 | urlRoot:"http://bb.ee.t16.se/data" //this is important 42 | }); 43 | 44 | var p1 = new person({ 45 | id:2 46 | }); 47 | 48 | p1.fetch({ 49 | success:function(){ 50 | alert(p1.getName() + "\n" + "Age: " + p1.get("age")); 51 | //this will show a new user's name and age 52 | } 53 | }); 54 | 55 | ``` 56 | 57 | আপনি id ১ থেকে ৮ পর্যন্ত দিয়ে দেখতে পারেন, একেকটার ক্ষেত্রে এক এক ইউজারের নাম দেখাবে। আমাদের সার্ভার সাইডের স্ক্রিপ্টটি হল নিচের মত 58 | 59 | ```php 60 | array( 65 | "firstName" => "Fra", 66 | "lastName" => "Diamante", 67 | "age" => "37" 68 | ), 69 | 2 => array( 70 | "firstName" => "Raphael", 71 | "lastName" => "Sanzio", 72 | "age" => "34" 73 | ), 74 | 3 => array( 75 | "firstName" => "Michael", 76 | "lastName" => "Angelo", 77 | "age" => "29" 78 | ), 79 | 4 => array( 80 | "firstName" => "Donatello", 81 | "lastName" => "di Niccolò di Betto Bardi", 82 | "age" => "43" 83 | ), 84 | 5 => array( 85 | "firstName" => "Domenico", 86 | "lastName" => "Ghirlandaio", 87 | "age" => "31" 88 | ), 89 | 6 => array( 90 | "firstName" => "Dosso", 91 | "lastName" => "Dossi", 92 | "age" => "40" 93 | ), 94 | 7 => array( 95 | "firstName" => "Rosso", 96 | "lastName" => "Fiorentino", 97 | "age" => "28" 98 | ), 99 | 8 => array( 100 | "firstName" => "Artemisia", 101 | "lastName" => "Gentileschi", 102 | "age" => "23" 103 | ), 104 | ); 105 | if($data[$id]) { 106 | echo json_encode($data[$id]); 107 | }else{ 108 | echo "{}"; 109 | } 110 | 111 | ``` 112 | 113 | আশাকরি সার্ভার সাইড কমুনিকেশনের জন্য এই fetch() মেথড কিভাবে ব্যবহার করতে হয় টা পরিষ্কার হয়েছে আপনাদের কাছে 114 | 115 | ## save() 116 | 117 | এই মেথডের মাধ্যমে মডেলের ডেটা সার্ভার সাইডে HTTP POST করা যায় 118 | 119 | ##id() 120 | 121 | এই মেথডটি মডেলের id রিটার্ন করে 122 | 123 | --- 124 | 125 | মডেলে আর কি কি মেথড আছে তা জানার জন্য ভিজিট করতে পারেন এইখানে [http://backbonejs.org/#Model](http://backbonejs.org/#Model) 126 | 127 | পূর্ববর্তী অংশ: [ব্যাকবোন মডেলের ডেটা ভ্যালিডেশন](bb101p5.html) | পরবর্তী অংশ: [মডেলের ইভেন্ট নিয়ে কাজ করা](bb101p7.html) 128 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Backbone Models - 101 6 | 305 | 438 | 439 | 440 |

ব্যাকবোন.জেএস ১০১

441 | 442 |

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

443 | 444 |

তো চলুন শুরু করা যাক :)

445 | 446 |

পরবর্তী অংশ: ব্যাকবোন.জেএস প্রজেক্টে সংযুক্ত করা

447 | 448 | 451 | 452 | 453 | 454 | -------------------------------------------------------------------------------- /bb101p2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | bb101p2 6 | 305 | 438 | 439 | 440 |

ব্যাকবোন.জেএস আপনার প্রজেক্টে সংযুক্ত করা

441 | 442 |

আপনার প্রোজেক্টে ব্যাকবোন সংযুক্ত করতে হলে সবচেয়ে সহজ উপায় হল সিডিএন.জেএসডেলিভার থেকে লাইব্রেরিটি লিংক করা। তবে একটা জিনিস মনে রাখা লাগবে যে ব্যাকবোন.জেএস সঠিক ভাবে কাজ করার জন্য অন্য দুইটি লাইব্রেরি ব্যবহার করে। এদের একটি হল আন্ডারস্কোর.জেএস এবং আরেকটি হল জেকুয়েরি।

443 | 444 |

আন্ডারস্কোর.জেএস এর ইউআরএল হল http://underscorejs.org আর জেকুয়েরির ইউআরএল হল http://jquery.com

445 | 446 |

মজার বিষয় হল আন্ডারস্কোরের পারফরম্যান্স আরও ভাল করার জন্য জন ডেভিড ডালটন একে নতুন করে লিখে লো-ড্যাশ নামে রিলিজ দিয়েছেন, সাথে যোগ করেছেন আরও নতুন নতুন কিছু ফাংশন। আপনি চাইলে ব্যাকবোনের সাথে আন্ডারস্কোর অথবা লো-ড্যাশ যেটা ইচ্ছা সেটা ব্যবহার করতে পারেন। লো-ড্যাশের ইউআরএল হল https://lodash.com

447 | 448 |

আপনার প্রজেক্টে ব্যাকবোন.জেএস নিচের মত করে সংযুক্ত করে নিন। মনে রাখবেন, ভাল ফলাফলের জন্য জাভাস্ক্রিপ্ট লাইব্রেরিগুলো সবসময় </body> ট্যাগের ঠিক আগে সংযুক্ত করা বাঞ্ছনীয়।

449 | 450 | 
<script src="//cdn.jsdelivr.net/jquery/1.11.2/jquery.min.js"></script>
451 | <script src="//cdn.jsdelivr.net/lodash/2.4.1/lodash.backbone.min.js"></script> 
452 | <!-- লো-ড্যাশ ব্যবহার না করতে চাইলে উপরের লাইনটির বদলে লিখতে পারেন নিচের লাইনটি -->
453 | <script src="//cdn.jsdelivr.net/underscorejs/1.7.0/underscore-min.js"></script> 
454 | <script src="//cdn.jsdelivr.net/backbonejs/1.1.2/backbone-min.js"></script>
455 |
456 | 457 |

পরবর্তী অংশ: ব্যাকবোন মডেল ব্যবহার শুরু করা

458 | 459 | 462 | 465 | 466 | 467 | 468 | -------------------------------------------------------------------------------- /bb101p4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | bb101p4 6 | 305 | 438 | 439 | 440 |

ব্যাকবোন মডেলে মেথড যোগ করা

441 | 442 |

এর আগের আর্টিকেলে আমরা দেখেছি কিভাবে কিছু ডিফল্ট ভ্যালু সহ ব্যাকবোন মডেল ইনিশিয়ালাইজ করা যায়। এবার চলুন আমাদের মডেলে কিছু মেথড যোগ করি। নিচের কোডে আমরা getName() নামে একটি মেথড যোগ করব যার কাজ হবে আমাদের person মডেলের firstName এবং lastName একসাথে রিটার্ন দেয়া

443 | 444 | 
var person = Backbone.Model.extend({
445 |     defaults:{
446 |         firstName: "The",
447 |         lastName: "Anonymous",
448 |         age: 0
449 |     },
450 |     getName: function(){
451 |         return this.get("firstName") + " " + this.get("lastName");
452 |     }
453 | });
454 | 
455 | var p1 = new person({
456 |     firstName:"Aron",
457 |     lastName:"Springfield"
458 | });
459 | 
460 | console.log(p1.getName());
461 | //this will output  Aron Springfield
462 |
463 | 464 |

উপরের কোডে খেয়াল করলে দেখবেন যে আমরা আমাদের person মডেলে getName() নামে একটি মেথড যোগ করেছি নিচের মত করে। আগেই বলেছি যে ব্যাকবোনের অবজেক্ট গুলো JSON ফরম্যাট এ লেখা হয়, তাই নতুন প্রপার্টি বা মেথড যোগ করতে গেলে কোডের এই স্ট্রাকচার টাই অনুসরণ করা বাঞ্ছনীয়।

465 | 466 | 
getName: function(){
467 |     return this.get("firstName") + " " + this.get("lastName");
468 | }
469 |
470 | 471 |

মেথডের ভেতর থেকে বর্তমান অবজেক্টের কোন প্রপার্টি অ্যাক্সেস করতে গেলে সেটা সবসময় this কি-ওয়ার্ড দিয়ে করতে হয়। জাভাস্ক্রিপ্টে কোন মেথড এর ভেতরে this কি-ওয়ার্ডটি সবসময় যেই অবজেক্টের মাঝে থেকে কল করা হচ্ছে সেই অবজেক্ট এর রেফারেন্স হিসেবে কাজ করে

472 | 473 |

আমরা চাইলে this.get("firstName") এর বদলে this.attributes["firstName"] এভাবেও প্রপার্টির ভ্যালু অ্যাক্সেস করতে পারতাম, কিন্তু সেটা না করাই ভাল। প্রপার্টির ভ্যালু অ্যাক্সেস করতে গেলে সবসময় get() কিংবা set() মেথড দুটো ব্যবহার করা উচিত

474 | 475 |

পূর্ববর্তী অংশ: ব্যাকবোন মডেল ব্যবহার শুরু করা | পরবর্তী অংশ: মডেলের ডেটা ভ্যালিডেশন

476 | 477 | 480 | 483 | 486 | 487 | 488 | 489 | -------------------------------------------------------------------------------- /bb101p3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | bb101p3 6 | 305 | 438 | 439 | 440 |

ব্যাকবোন মডেল ব্যবহার শুরু করা

441 | 442 |

ব্যাকবোন মডেল হল আপনার অ্যাপ্লিকেশনের ডেটা সহজে স্টোর করার জন্য একধরনের অবজেক্ট। জাভাস্ক্রিপ্টে একে লেখা হয় JSON হিসেবে। অন্যান্য ডেটা-স্ট্রাকচার (যেমন অ্যারে) এর মত ব্যাকবোন মডেলের ব্যবহার ও খুবই সহজ। কিন্তু এর বিভিন্ন প্রপার্টি, ইভেন্ট এবং মেথডের সমন্বয়ে এটি পরিণত হয়েছে অত্যন্ত শক্তিশালী এবং উপকারী একটি ডেটা-স্ট্রাকচারে। চলুন দেখি কিভাবে ব্যাকবোন মডেল ইনিশিয়ালাইজ করা যায়

443 | 444 | 
var person = Backbone.Model.extend({
445 |     //that's it :)
446 | });
447 |
448 | 449 |

উপরের কোডের মাধ্যমে person নামে একটি ব্যাকবোন মডেল ইনিশিয়ালাইজ করা হয়েছে। আমরা এতে এক্সট্রা কোন ডেটা বা মেথড যোগ করিনি, জাস্ট ডিফল্ট ব্যাকবোন মডেল অবজেক্ট কে এক্সটেন্ড করেছি। চলুন একে ব্যবহার করা যাক

450 | 451 | 
var p1 = new person();
452 | 
453 | p1.set("firstName", "Aron");
454 | p1.set("lastName", "Strongfield");
455 | p1.set("age", 31);
456 | 
457 | //or we can write like this, all at once
458 | 
459 | p1.set({
460 |     firstName: "Aron",
461 |     lastName: "Strongfield",
462 |     age: 31
463 | });
464 | 
465 | console.log(p1.get("firstName"), p1.get("lastName")); 
466 | // this will output "Aron Strongfield"
467 |
468 | 469 |

ব্যাকবোন মডেলে ডিফল্ট ভ্যালু যোগ করা

470 | 471 |

আমরা চাইলেই ব্যাকবোন মডেলে ডিফল্ট কিছু ভ্যালু রেখে দিতে পারি। পরবর্তীতে মডেলটি ইনিশিয়ালাইজ করা হলে এই ভ্যালু গুলো সবসময়েই নতুন অবজেক্টটিতে পাওয়া যাবে. চলুন আমরা আগের person মডেলটিতে ডিফল্ট ভাবে age, firstName এবং lastName ভ্যালু গুলো যোগ করে একে নতুন ভাবে লিখি

472 | 473 | 
var person = Backbone.Model.extend({
474 |     defaults:{
475 |         firstName: "The",
476 |         lastName: "Anonymous",
477 |         age: 0
478 |     }
479 | });
480 |
481 | 482 |

এবার নিচের কোডটুকু রান করুন

483 | 484 | 
var p1 = new person();
485 | console.log(p1.get("firstName"), p1.get("lastName")); 
486 | // this will output "The Anonymous"
487 |
488 | 489 |

পরবর্তী অংশ: ব্যাকবোন মডেলে একটি মেথড যোগ করা

490 | 491 | 494 | 497 | 500 | 501 | 502 | 503 | -------------------------------------------------------------------------------- /bb101p5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | bb101p5 6 | 305 | 438 | 439 | 440 |

ব্যাকবোন মডেলের ডেটা ভ্যালিডেশন

441 | 442 |

আপনি চাইলেই আপনার ব্যাকবোন মডেলে চমৎকার করে ডেটা ভ্যালিডেশন যোগ করতে পারেন। এর মাধ্যমে আপনি নিশ্চিত করতে পারবেন যে আপনার মডেলে ভ্যালিড ডেটা এসেছে কিনা। নিচের কোডটুকু দেখুন, এখানে আমরা আমাদের person মডেলে বয়সের উপরে ভ্যালিডেশন যোগ করবো যেন কেউ বয়স হিসেবে নেগেটিভ ভ্যালু কিংবা ০ সেট না করতে পারে

443 | 444 | 
var person = Backbone.Model.extend({
445 |     defaults:{
446 |         firstName: "The",
447 |         lastName: "Anonymous",
448 |         age: 0
449 |     },
450 |     getName: function(){
451 |         return this.get("firstName") + " " + this.get("lastName");
452 |     },
453 |     validate:function(attributes, options){
454 |         if(attributes.age<=0){
455 |             return "Invalid age";
456 |         }
457 |     }
458 | });
459 |
460 | 461 |

উপরের কোডে দেখবেন যে আমরা validate() নামে একটা ফাংশন যোগ করেছি। এই ফাংশনটি মডেলের isValid() মেথড অ্যাক্সেস করলে রান করে। এছাড়া মডেল যদি সার্ভারের সাথে সিংক (sync) করে তাহলে মডেলের save() ফাংশন কল করলেও এই validate ফাংশনটি রান করে, এবং এরর থাকলে সেটা সার্ভারের সাথে সিংক করে না। এই সিংকের বিষয়টা আমরা পরবর্তীতে দেখব, এখন ভ্যালিডেশন নিয়ে আলোচনা চলুক আপাতত

462 | 463 |

validate ফাংশন যোগ করার পরে আমরা খুব সহজেই আমাদের মডেলের ডেটা ভ্যালিড কিনা সেটা চেক করতে পারি isValid() ফাংশনের সাহায্যে। কোন ভ্যালিডেশন এরর থাকলে সেই এরর টা কি সেটাও আমরা জানতে পারি। নিচের কোডটুকু দেখুন

464 | 465 | 
var p1 = new person({
466 |     firstName:"Aron",
467 |     lastName:"Springfield"
468 | });
469 | 
470 | p1.set({age:0});
471 | 
472 | if(!p1.isValid()){
473 |     alert (p1.validationError);
474 |     //this will output "Invalid age"
475 | }
476 |
477 | 478 |

আপনি চাইলে মডেলে ডেটা সেট করার সময়ও এই validate ফাংশন টি রান করাতে পারেন। এজন্য মডেলের set() মেথডে একটা এক্সট্রা প্যারামিটার পাঠানো লাগে {validate:true} । নিচের কোডটুকু দেখুন

479 | 480 |

এখানে সেট করার সময় ভ্যালিডেশন চেক হয়নি

481 | 482 | 
console.log ( p1.set({age:0}) );
483 | //no validation ran yet. age = 0
484 |
485 | 486 |

এখানে সেট করার সময় ভ্যালিডেশন চেক হয়েছে

487 | 488 | 
console.log ( p1.set({age:0}, {validate:true}) );
489 | //output is false, means that validation fails
490 |
491 | 492 |

আশাকরি এই ভ্যালিডেশন এর বিষয়টি আপনাদের কাছে পরিষ্কার হয়েছে।

493 | 494 |

পূর্ববর্তী অংশ: ব্যাকবোন মডেলে মেথড যোগ করা | পরবর্তী অংশ: ব্যাকবোন মডেলের কিছু চমৎকার এবং উপকারী মেথড এর সাথে পরিচিতি

495 | 496 | 499 | 502 | 505 | 506 | 507 | 508 | -------------------------------------------------------------------------------- /bb101p7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | bb101p7 6 | 305 | 438 | 439 | 440 |

মডেলের ইভেন্ট নিয়ে কাজ করা

441 | 442 |

ব্যাকবোন মডেল নিয়ে এটা শেষ অংশ আর এখানে আমরা আলোচনা করবো মডেলের ইভেন্ট নিয়ে এবং কিভাবে সেই ইভেন্টের সাথে কোন লিসেনার বাইন্ড করা যায়। নিচের উদাহরণে আমরা firstName এবং lastName এর উপরে দুটি লিসেনার অ্যাটাচ করবো, দুইভাবে

443 | 444 |

প্রথম উদাহরণে আমরা দেখব কিভাবে মডেলের কোন ডেটা পরিবর্তন হলে কোন লিসেনার ফাংশন রান করান যায়

445 | 446 | 
var person = Backbone.Model.extend({
447 |     defaults: {
448 |         firstName: "The",
449 |         lastName: "Anonymous",
450 |         age: 0
451 |     }
452 | });
453 | 
454 | var p1 = new person();
455 | 
456 | p1.on("change", function (model, attributes) {
457 |     console.log('something has changed');
458 | });
459 | 
460 | p1.set("firstName", "Aron");
461 | //this will trigger the change event, and you will see the console output
462 | 
463 |
464 | 465 |

উপরের উদাহরণে আপনি দেখলেন যে কিভাবে আমরা মডেলের change ইভেন্টের সাথে একটা ফাংশন বাইন্ড করেছি যাতে মডেলের কোন প্রপার্টি/অ্যাট্রিবিউট পরিবর্তিত হলেই সেই ফাংশনটি রান করে। কিন্তু এখানে আমরা যদি চাই যে নির্দিষ্ট কোন প্রপার্টি / অ্যাট্রিবিউট এর পরিবর্তন হলে আমরা কোন কাজ করব, তাহলে লক্ষ্য করুন নিচের উদাহরণ টি

466 | 467 | 
var person = Backbone.Model.extend({
468 |     defaults: {
469 |         firstName: "The",
470 |         lastName: "Anonymous",
471 |         age: 0
472 |     }
473 | });
474 | 
475 | var p1 = new person();
476 | 
477 | p1.on("change:lastName", function (model, name) {
478 |     console.log('Last Name Changed from ' + model.previous('lastName') + " to " + name);
479 | });
480 | 
481 | p1.set("firstName", "Aron");
482 | //no event will be fired
483 | 
484 | p1.set("lastName", "Springfield");
485 | //this will trigger the event
486 | //outputs "Last Name Changed from Anonymous to Springfield"
487 |
488 | 489 |

উপরের উদাহরণে আপনি দেখবেন যে আমরা lastName এর পরিবর্তনের উপরে একটি ইভেন্ট লিসেনার বাইন্ড করেছি। এর ফলে firstName পরিবর্তন করা হলেও সেটা কোন ইভেন্ট লিসেনার রান করে নি। শুধুমাত্র যখন আমরা lastName সেট করেছি নতুন করে, তখন আমাদের লিসেনার ফাংশনটি রান করেছে

490 | 491 |

ব্যাকবোন.জেএস এর বিভিন্ন ইভেন্টের লিস্ট জানতে এই ইউআরএলটি দেখতে পারেন http://backbonejs.org/#Events-catalog

492 | 493 |

এই ইউআরএলে গেলে লিস্টে দেখবেন যে মডেলের বেশ কয়েকধরনের ইভেন্ট রয়েছে। ইতোমধ্যেই আমরা change ইভেন্ট টি দেখেছি। এরকম রয়েছে destroy যা কিনা মডেলকে destroy() করলে রান করে। এছাড়া সার্ভার সাইডে যখন আমরা মডেলের ডেটা সিংক করব, তখন আরও কিছু ইভেন্ট রান করে, যেমন "sync", "request", "error" ইত্যাদি

494 | 495 |

পূর্ববর্তী অংশ: ব্যাকবোন.জেএস মডেলের কিছু চমৎকার এবং উপকারী মেথড

496 | 497 | 500 | 503 | 506 | 507 | 508 | 509 | -------------------------------------------------------------------------------- /bb101p6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | bb101p6 6 | 305 | 438 | 439 | 440 |

ব্যাকবোন.জেএস মডেলের কিছু চমৎকার এবং উপকারী মেথড

441 | 442 |

এই অংশে আমরা আলোচনা করব ব্যাকবোন.জেএস মডেলের কিছু মেথড নিয়ে যেগুলো বেশ কাজের, এবং ব্যাকবোন নিয়ে কাজ করার সময় অনেক কাজে লাগে। চলুন এক এক করে সেগুলো দেখা যাক

443 | 444 |

has()

445 | 446 |

এর সাহায্যে আপনি খুব সহজেই মডেলের চেক করতে পারবেন যে মডেলের কোন প্রপার্টিতে কোন ভ্যালু সেট করা আছে কিনা।

447 | 448 | 
if(p1.has("age")){
449 |     console.log("Age = " + p1.get("age"));
450 | }
451 |
452 | 453 |

toJSON()

454 | 455 |

এই মেথডের সাহায্যে আপনি কোন ব্যাকবোন.জেএস মডেলকে JSON অবজেক্টে রূপান্তর করতে পারবেন। নিচের কোড চেক করুন

456 | 457 | 
console.log(p1.firstName);
458 | //this will output undefined
459 | 
460 | var p1json = p1.toJSON();
461 | console.log(p1json.firstName);
462 | //this will work :)
463 |
464 | 465 |

fetch()

466 | 467 |

এই মেথডের সাহায্যে আপনি সার্ভার থেকে আপনার মডেলের ডেটা লোড করতে পারবেন। এক্ষেত্রে সার্ভার থেকে অবশ্যই আপনাকে ভ্যালিড JSON ডেটা রিটার্ন করতে হবে। মডেল কোন ইউআরএলে হিট করবে সেটা আপনাকে বলে দিতে হবে urlRoot প্রপার্টির মাধ্যমে। চলুন আমরা দেখি কিভাবে মডেলের save() মেথড টি ব্যবহার করা হয়।

468 | 469 | 
var person = Backbone.Model.extend({
470 |     defaults:{
471 |         firstName: "The",
472 |         lastName: "Anonymous",
473 |         age: 0
474 |     },
475 |     getName: function(){
476 |         return this.get("firstName") + " " + this.get("lastName");
477 |     },
478 |     urlRoot:"http://bb.ee.t16.se/data" //this is important
479 | });
480 | 
481 | var p1 = new person({
482 |     id:2
483 | });
484 | 
485 | p1.fetch({
486 |     success:function(){
487 |         alert(p1.getName() + "\n" + "Age: " + p1.get("age"));
488 |         //this will show a new user's name and age
489 |     }
490 | });
491 | 
492 |
493 | 494 |

আপনি id ১ থেকে ৮ পর্যন্ত দিয়ে দেখতে পারেন, একেকটার ক্ষেত্রে এক এক ইউজারের নাম দেখাবে। আমাদের সার্ভার সাইডের স্ক্রিপ্টটি হল নিচের মত

495 | 496 | 
<?php
497 | header("Access-Control-Allow-Origin: *");
498 | $id = $_GET['id'];
499 | $data = array(
500 |     1 => array(
501 |         "firstName" => "Fra",
502 |         "lastName" => "Diamante",
503 |         "age" => "37"
504 |     ),
505 |     2 => array(
506 |         "firstName" => "Raphael",
507 |         "lastName" => "Sanzio",
508 |         "age" => "34"
509 |     ),
510 |     3 => array(
511 |         "firstName" => "Michael",
512 |         "lastName" => "Angelo",
513 |         "age" => "29"
514 |     ),
515 |     4 => array(
516 |         "firstName" => "Donatello",
517 |         "lastName" => "di Niccolò di Betto Bardi",
518 |         "age" => "43"
519 |     ),
520 |     5 => array(
521 |         "firstName" => "Domenico",
522 |         "lastName" => "Ghirlandaio",
523 |         "age" => "31"
524 |     ),
525 |     6 => array(
526 |         "firstName" => "Dosso",
527 |         "lastName" => "Dossi",
528 |         "age" => "40"
529 |     ),
530 |     7 => array(
531 |         "firstName" => "Rosso",
532 |         "lastName" => "Fiorentino",
533 |         "age" => "28"
534 |     ),
535 |     8 => array(
536 |         "firstName" => "Artemisia",
537 |         "lastName" => "Gentileschi",
538 |         "age" => "23"
539 |     ),
540 | );
541 | if($data[$id]) {
542 |     echo json_encode($data[$id]);
543 | }else{
544 |     echo "{}";
545 | }
546 | 
547 |
548 | 549 |

আশাকরি সার্ভার সাইড কমুনিকেশনের জন্য এই fetch() মেথড কিভাবে ব্যবহার করতে হয় টা পরিষ্কার হয়েছে আপনাদের কাছে

550 | 551 |

save()

552 | 553 |

এই মেথডের মাধ্যমে মডেলের ডেটা সার্ভার সাইডে HTTP POST করা যায়

554 | 555 |

id()

556 | 557 |

এই মেথডটি মডেলের id রিটার্ন করে

558 | 559 |
560 | 561 |

মডেলে আর কি কি মেথড আছে তা জানার জন্য ভিজিট করতে পারেন এইখানে http://backbonejs.org/#Model

562 | 563 |

পূর্ববর্তী অংশ: ব্যাকবোন মডেলের ডেটা ভ্যালিডেশন | পরবর্তী অংশ: মডেলের ইভেন্ট নিয়ে কাজ করা

564 | 565 | 568 | 571 | 574 | 577 | 580 | 581 | 582 | 583 | --------------------------------------------------------------------------------