মিথস্ক্রিয়া গতি বাড়ানোর জন্য ব্যাকবোন.জেএস ব্যবহার করুন

কন্টেন্ট

• চলুন শুরু করা যাক
• আমাদের প্রথম মডেল
• চিত্র সংগ্রহ
• ফ্লিকারবম্বআইমেজ
• ভিউ লেয়ার
• ফ্লিকারবম্বআইমেজভিউ
• হোম স্ট্রেচ
• বড় ওল ওয়েব অ্যাপ্লিকেশনগুলির সাথে দুর্দান্ত কাজ করে
• অতিরিক্ত সম্পদ

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

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

এটি পড়ার আগে আপনি ফ্লিকারবম্বের তাত্ক্ষণিকভাবে নজর দেওয়া উচিত এটি সুপারিশ করা হয়। এটি সেই ধরণের মধ্যে "ক্লিকের জন্য হাজার শব্দের মূল্য রয়েছে" তার মধ্যে একটি। এগিয়ে যান, আমরা অপেক্ষা করব।

ব্লকটিতে আজকাল প্রচুর জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক রয়েছে, স্প্রাউটকোর, জাভাস্ক্রিপ্ট এমভিসি, স্পাইন, স্যামি, নকআউট। তবে আমরা কয়েকটি ভিন্ন কারণে এই বিশেষ প্রকল্পের জন্য ব্যাকবোন.জেগুলি পছন্দ করেছি:

1. এটি হালকা (বাস্তবে 100% চর্বি মুক্ত)

• ওজনে, সর্বশেষ প্যাক করা সংস্করণটি প্রায় 4.6kb being
• কোডে, কেবলমাত্র এক হাজার লাইন কোডের বেশি হওয়ায়, আপনার মন না হারিয়ে অভ্যন্তরীণ অংশের মধ্যে স্ট্যাক ট্রেস অনুসরণ করা মারাত্মক কঠিন নয়

2. এটি জাভাস্ক্রিপ্ট মত দেখাচ্ছে

• কারণ এটি জাভাস্ক্রিপ্ট, এটাই এবং এটিই
• এটি jQuery ব্যবহার করে, যা আপনার পিতামহী আজকাল জানেন

৩. সুপার সরল অধ্যবসায়

• বাক্সের বাইরে এটি ব্যাকএন্ডে (আরএসটি এর মাধ্যমে) ডেটা অব্যাহত রাখে, তবে একটি প্লাগ-ইন ফেলে রেখে এটি স্থানীয় স্টোরেজে সংরক্ষণ করবে
• যেহেতু এটি দৃ pers়তা এপিআইকে বিমূর্ত করে তোলে, কেবলমাত্র স্থানীয় স্টোরেজ প্লাগ-ইন সরিয়ে আমরা এটি একটি বিশ্রাম ব্যাকএন্ডে চালিয়ে যেতে পারি could

চলুন শুরু করা যাক

যেহেতু ব্যাকবোন.জেএস কেবল জাভাস্ক্রিপ্ট, তাই আমাদের যা করা দরকার তা হ'ল এটি পৃষ্ঠাতে অ্যান্ডস্কোর.জেএস সহ অন্তর্ভুক্ত করা উচিত। jQuery ব্যাকবোন প্রতি সেটের জন্য একটি কঠিন নির্ভরতা নয়, তবে আমরা এটি ব্যবহার করব তাই আমরা এটি এখানে অন্তর্ভুক্ত করব। আমরা স্থানীয় স্টোরেজ প্লাগ-ইনটিকেও সংযুক্ত করব, যেহেতু আমরা ব্যাকএন্ড সেট আপ করতে কোনও ঝামেলা চাই না। নোট করুন যে সরলতার জন্য এখানে ফাইলগুলি সরাসরি সংযুক্ত করছিলেন তবে আপনার উত্পাদনতে সর্বদা আপনার নিজের সম্পত্তি হোস্ট করা উচিত।

স্ক্রিপ্ট src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> / স্ক্রিপ্ট> স্ক্রিপ্ট src = "http://docamentcloud.github.com/backbone/ backbone-min.js "> / স্ক্রিপ্ট> স্ক্রিপ্ট src =" http://docamentcloud.github.com/:30 //7 -/corescore-min.js "> / স্ক্রিপ্ট> স্ক্রিপ্ট src =" https://raw.github.com/ jeromegn / backbone.localStorage / master / backbone.localStorage-min.js "> / স্ক্রিপ্ট>

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

আমাদের প্রথম মডেল

প্রথম কাজটি মোকাবেলা করতে যাচ্ছিল ফ্লিকার থেকে ফটোগুলি টানতে। ব্যাকবোনটিতে একটি ফ্লিকারআইমেজ মডেলিং করা যথেষ্ট সহজ, আমরা ফ্লিকার আইমেজ নামে একটি নতুন মডেল তৈরি করব এবং বিভিন্ন আকারের থাম্বস পেতে আমাদের সহায়তা করার জন্য কিছু পদ্ধতি যুক্ত করব।

var ফ্লিকারআইমেজ = ব্যাকবোন.মোডেল.একসেট ({ফুলসাইজ_আর্ল: ফাংশন () {এই.আইমেজ_উর্ল ('মিডিয়াম');}, থাম্ব_আরল: ফাংশন () {ফিরিয়ে দিন এই আইমেজ_আরএল ('স্কোয়ার');}, চিত্র_আরল: ফাংশন ( আকার) {var সাইজ_কোড; স্যুইচ (আকার) 'কেস' স্কোয়ার ': সাইজ_কোড =' _ এস '; ব্রেক; // 75x75 কেস' মিডিয়াম ': সাইজ_কোড =' _জ '; ব্রেক; // দীর্ঘতম সাইড কেসে' 640 ': সাইজ_কোড =' _ বি '; ব্রেক; // 1024 দীর্ঘতম পার্শ্ব ডিফল্টতে: আকার_কোড =' ';} "http: // ফার্ম" + এই.জেট (' ফার্ম ') + ".static.flickr.com / "+ this.get ('server') +" / "+ this.get ('id') +" _ "+ this.get ('গোপন') + আকার_কোড +" .webp ";}})

ব্যাকবোনগুলির মডেলগুলি এমন অবজেক্টস যা অবিচল থাকে এবং এগুলির সাথে কিছু ফাংশন যুক্ত থাকে, অনেকগুলি অন্যান্য এমভিসি ফ্রেমওয়ার্কের মডেলের মতো। ব্যাকবোন মডেলগুলির icalন্দ্রজালিক অংশটি হ'ল আমরা ইভেন্টগুলিকে গুণাবলীর সাথে আবদ্ধ করতে পারি, যাতে সেই বৈশিষ্ট্যটি পরিবর্তিত হলে আমরা তা প্রতিফলিত করতে আমাদের দৃষ্টিভঙ্গি আপডেট করতে পারি। তবে আমরা নিজের থেকে কিছুটা এগিয়ে চলেছি।

আমরা ফ্লিকার থেকে ফটোগুলি টানলে, আমরা সমস্ত আকারের জন্য ইউআরএল তৈরি করতে পর্যাপ্ত তথ্য পেতে যাচ্ছি। তবে সেই সমাবেশটি আমাদের কাছে রেখে দেওয়া হয়েছে, সুতরাং আমরা .image_url () ফাংশনটি প্রয়োগ করে যা একটি আকারের প্যারামিটার নেয় এবং একটি সর্বজনীন লিঙ্ক দেয়। যেহেতু এটি একটি ব্যাকবোন মডেল, আমরা মডেলটির বৈশিষ্ট্যগুলি অ্যাক্সেস করার জন্য this.get () ব্যবহার করতে পারি। সুতরাং এই মডেলটির সাহায্যে আমরা ফ্লিকার চিত্রের URL পেতে কোডের অন্য কোথাও নিম্নলিখিতটি করতে পারি।

ফ্লিকারআইমেজ.আইমেজ_আরল (‘বৃহত্তর’)

খুব সংক্ষিপ্ত, তাই না? যেহেতু এই মডেলটি আমাদের আবেদনের জন্য সুনির্দিষ্ট, তাই আমরা ফুলসাইজ এবং থাম্ব ইমেজ মাপগুলির জন্য কিছু মোড়ক ফাংশন যুক্ত করব।

চিত্র সংগ্রহ

ফ্লিকারবম্ব একক চিত্র নয়, চিত্র সংগ্রহের কাজ করে এবং ব্যাকবোন এটির মডেলিংয়ের জন্য একটি সুবিধাজনক উপায় রয়েছে has যথাযথরূপে সংকলনটি হ'ল আমরা একক স্থানধারীর জন্য একসাথে ফ্লিকার চিত্রগুলি গ্রুপ করতে ব্যবহার করব।

var ফ্লিকারআইমেজস = ব্যাকবোন. কালেকশন.একসেট ({মডেল: ফ্লিকারিমেজ, কী: ফ্লিকারবম্বপিকি, পৃষ্ঠা: 1, আনুন: ফাংশন (কীওয়ার্ডস, সাফল্য) {var স্ব = এটি; সাফল্য = সাফল্য || no .নুপ; এই.কিওয়ার্ডস = কীওয়ার্ডস || এই.কিওয়ার্ডস; aj .জ্যাক্স ({url: 'http://api.flickr.com/services/rest/', ডেটা: {এপি_কি: সেলফ.কি, ফর্ম্যাট: 'জেসন', পদ্ধতি: 'ফ্লিকার)। Photos.search ', ট্যাগস: this.keyওয়ার্ডস, প্রতি_পৃষ্ঠা: 9, পৃষ্ঠা: this.page, লাইসেন্স: flickrbombLicenseType}, ডেটা টাইপ:' jsonp ', jsonp:' jsoncallback ', সাফল্য: ফাংশন (প্রতিক্রিয়া) {self.add (প্রতিক্রিয়া) .photos.photo); সাফল্য ();}});}, নেক্সটপেজ: ফাংশন (কলব্যাক) {this.page + = 1; this.remove (this.models); this.fetch (নাল, কলব্যাক);}, prevPage: ফাংশন (কলব্যাক) {if (this.page> 1) {this.page - = 1;} this.remove (this.models); this.fetch (নাল, কলব্যাক);}});

এখানে কয়েকটি বিষয় লক্ষণীয়। প্রথম বন্ধ, মডেল বৈশিষ্ট্যটি সংগ্রহগুলি জানায় যে এটি কী ধরণের মডেল সংগ্রহ করছে। আমাদের আরও কয়েকটি বৈশিষ্ট্য রয়েছে যা আমরা পরে ব্যবহারের জন্য শুরু করেছি: কীটি আমাদের ফ্লিকার এপিআই কী, আপনি নিজের ফ্লিকার এপিআই কী'র স্ট্রিং সহ ফ্লিকারবম্বাপিকিকে প্রতিস্থাপন করতে চাইবেন। একটি ফ্লিকার এপিআই কী পাওয়া নিখরচায় এবং সহজ, এই লিঙ্কটি অনুসরণ করুন: www.flickr.com/services/api/misc.api_keys.html। পৃষ্ঠাটির বৈশিষ্ট্যটি হ'ল আমরা থাকা ফ্লিকার ফটোগুলির বর্তমান পৃষ্ঠা।

এখানে বড় পদ্ধতি হ'ল .fetch (), যা ফ্লিকার এপিআই থেকে ফটো টানার বিবরণ সরিয়ে দেয়। ক্রস-ডোমেন অনুরোধগুলির সাথে সমস্যাগুলি এড়ানোর জন্য, আমরা JSONP ব্যবহার করছি, যা ফ্লিকার এপিআই এবং jQuery উভয়ই সমর্থন করে। আমরা এপিআইতে যাচ্ছি অন্যান্য পরামিতিগুলি স্ব-বর্ণনামূলক হওয়া উচিত। বিশেষ আগ্রহের বিষয় হ'ল ব্যাকবোন ফাংশনগুলি এখানে ডাকা হচ্ছে। সাফল্যের কলব্যাকে আমরা .add () ব্যবহার করি, এটি একটি ফাংশন যা মডেল বৈশিষ্ট্যের একটি অ্যারে নেয়, সেই বৈশিষ্ট্যগুলি থেকে মডেল দৃষ্টান্ত তৈরি করে এবং তারপরে সেগুলি সংযোজনে যুক্ত করে।

.NextPage () এবং .prevPage () ফাংশনগুলি প্রথমে আমরা যে পৃষ্ঠাটি প্রদর্শন করতে চাই তা পরিবর্তন করে,
থেকে সমস্ত বিদ্যমান মডেলগুলি সরাতে সংগ্রহ ফাংশনটি সরান () সরান)
সংগ্রহ করুন এবং তারপরে বর্তমান পৃষ্ঠার জন্য ফটোগুলি আনতে কল করুন (আমরা কেবল এটিই
পরিবর্তিত)।

ফ্লিকারবম্বআইমেজ

আমাদের ফিরে আসার পথে, স্থানধারক চিত্রটির প্রতিনিধিত্ব করার জন্য আমাদের আরও একটি মডেল প্রয়োজন, যা ফ্লিকারআইমেজের সংগ্রহ এবং নির্বাচিত বর্তমান ফ্লিকারআইমেজ সমন্বিত থাকবে। আমরা এই মডেলটিকে ফ্লিকারবম্বআইমেজ বলব।

var লোকালস্টোরেজ = (সমর্থন_লোকাল_স্টোরেজ ())? নতুন স্টোর ("ফ্লিকারবম্বআইজেজ"): নাল; var ফ্লিকারবম্বআইমেজ = ব্যাকবোন.মোডেল.একসেট ({লোকালস্টোরেজ: লোকালস্টোরেজ, ইনিশিয়াল: ফাংশন () {_.bindAll (এটি, 'লোডফার্সআইমেজ'); এই.ফ্লিকআইমেজস = নতুন ফ্লিকারআইমেজ (); this.flickrImages.fetch (this.get ('কীওয়ার্ডস'), this.loadFirstImage); this.set (id: this.get ("id")); this.bind ('change: src', this.changeSrc) ;।, চেঞ্জএসসিআর: ফাংশন () {this.save ();;, লোডফার্সআইমেজ: ফাংশন () {যদি (this.get ('src') === অপরিবর্তিত) {this.set ({src: this.flickrImages প্রথম ()। চিত্র_আরল ()});}}});

যেহেতু এই মডেলটি বর্তমানে নির্বাচিত চিত্রটি পৃষ্ঠা লোডের মধ্যে রাখার জন্য দায়বদ্ধ তাই স্থানীয় স্টোরেজটি কী ব্যবহার করবে তা এটি জানতে হবে।প্রথম লাইনটি স্থানীয় স্টোরেজের জন্য সমর্থন রয়েছে তা নিশ্চিত করবে এবং তারপরে নির্বাচিত চিত্রটি ধরে রাখতে আমরা স্টোর তৈরি করব।

ব্যাকবোন আমাদের একটি .initialize () ফাংশন সংজ্ঞায়িত করতে দেয় যা মডেলটির উদাহরণ তৈরি করা হলে ডাকা হবে। আমরা এই ফাংশনটি ফ্লিকারবম্বআইমেজে ফ্লিকারব্যামেজেস সংগ্রহের একটি নতুন উদাহরণ তৈরি করতে, এই চিত্রটির জন্য ব্যবহৃত কীওয়ার্ডগুলি পাশ দিয়ে, এবং তারপরে ফ্লিকার থেকে চিত্রগুলি আনতে ব্যবহার করি।

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

এই মডেলটির এসসিআর বৈশিষ্ট্য পরিবর্তিত হলে আমরা আমাদের .ચેঞ্জএসসিআর () ফাংশনটি সরিয়ে রাখতে ব্যাকবোন এর অ্যাট্রিবিউট কলব্যাকগুলিও ব্যবহার করতে যাচ্ছি। এই সমস্ত কলব্যাকটি হ'ল কল .save (), একটি ব্যাকবোন মডেল ফাংশন যা স্টোর স্তরটি কার্যকর করা হয়েছে (আমাদের ক্ষেত্রে লোকালস্টোরে) মডেলের বৈশিষ্ট্যগুলি ধরে রাখে। এইভাবে, যখনই নির্বাচিত চিত্রটি পরিবর্তন করা হয়, তা অবিলম্বে অবিচল থাকে।

ভিউ লেয়ার

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

একটি ভিউ সাধারণত (তবে সর্বদা নয়) কিছু ডেটার সাথে আবদ্ধ থাকে এবং সেই ডেটা থেকে উপস্থাপনা মার্কআপ তৈরি করতে তিনটি পর্যায় অতিক্রম করে:

1. ভিউ অবজেক্টটি আরম্ভ করা হয়েছে এবং একটি খালি উপাদান তৈরি করা হবে।
২. রেন্ডার ফাংশনটি বলা হয়, এটি পূর্ববর্তী ধাপে তৈরি উপাদানটিতে সন্নিবেশ করে দর্শনের জন্য মার্কআপ তৈরি করে।
3. উপাদানটি ডিওএম-এর সাথে সংযুক্ত থাকে।

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

ফ্লিকারবম্বআইমেজভিউ

var ফ্লিকারবম্বআইজেভিউ ভিউ = ব্যাকবোন.ভিউ.একসেট ({ট্যাগনাম: "ডিভ", ক্লাসনাম: "ফ্লিকারবম্বকন্টেইনার", লক: মিথ্যা, টেম্পলেট: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), ইনিশিয়াল করুন: ফাংশন (বিকল্প) {_.bindAll (এটি,' অ্যাডিম্যাজেশন ',' আপডেটএসসিআর ',' সেটডিমাইশনস ',' আপডেটডাইমেনশনস '); কীওয়ার্ডস = বিকল্পগুলি। img.attr ('src') .replace ('flickr: //', ''); this।। el = $ (this.el); this.image = নতুন ফ্লিকারবম্বইমেজ ({কীওয়ার্ডস: কীওয়ার্ডস, আইডি: বিকল্পগুলি। img.attr ('id')}); this.image.flickrImages.bind ('add', this.addImage); this.image.bind ('পরিবর্তন: src', this.updateSrc);}, ইভেন্ট: { "ক্লিক করুন .সেটআপআইকন": "ক্লিকসেটআপ", "ক্লিক করুন .ফ্লিকারবম্বফ্লাইআউট এ.ফোটো": "সিলেক্ট ইমেজ", "ক্লিক করুন .ফ্লিকারবম্বফ্লাইআউট a.next": "NextFlickrPhotos", "ক্লিক করুন .ফ্লিকবার্বমফ্লাইআউট a.prev": "prevFlickrPhotos"}, রেন্ডার: ফাংশন () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); এটিকে ফেরত দিন;}, ...});

এই দৃশ্যের ফাংশনগুলি বংশবৃদ্ধির জন্য বাদ দেওয়া হয়েছে, সম্পূর্ণরূপে উত্স কোডটি গিটহাবটিতে উপলব্ধ: github.com/zurb/flickrbomb

ভিউ শীর্ষে, আমাদের কয়েকটি ব্যাকবোন নির্দিষ্ট বৈশিষ্ট্য রয়েছে। ট্যাগনাম এবং ক্লাসনেম ট্যাগ এবং শ্রেণি সংজ্ঞায়িত করতে ব্যবহৃত হয় যা এই দেখার উপাদানটির জন্য প্রয়োগ করা হবে। মনে রাখবেন যে ভিউ ক্রিয়েশনের প্রথম ধাপটি কোনও অবজেক্ট তৈরি করছে এবং যেহেতু সেই ক্রমটি ব্যাকবোন দ্বারা পরিচালিত হয়, তাই আমাদের উপাদান এবং শ্রেণি নির্দিষ্ট করতে হবে। নোট করুন যে ব্যাকবোনটিতে বুদ্ধিমান ডিফল্ট রয়েছে; যদি আমরা এই বৈশিষ্ট্যগুলি বাদ দিই, একটি ডিভ ডিফল্টরূপে ব্যবহৃত হয় এবং আপনি কোনও নির্দিষ্ট না করে কোনও শ্রেণি প্রয়োগ করা হবে না।

টেমপ্লেট বৈশিষ্ট্যটি একটি সম্মেলন, তবে প্রয়োজন হয় না। আমরা জাভাস্ক্রিপ্ট টেম্পলেট ফাংশন নির্দিষ্ট করতে এখানে এটি ব্যবহার করছি আমরা এই দর্শনটির জন্য আমাদের মার্কআপ জেনারেট করতে ব্যবহার করব। আমরা অ্যান্ডসোর.জেএস-এ অন্তর্ভুক্ত _.টেম্পলেট () ফাংশনটি ব্যবহার করি তবে আপনি যেটি কখনও টেম্প্লেটিং ইঞ্জিন পছন্দ করেন তা ব্যবহার করতে পারেন, আমরা আপনাকে বিচার করব না।

আমাদের .initialize () ফাংশনে আমরা চিত্র ট্যাগ থেকে কীওয়ার্ড স্ট্রিংটি বের করছি এবং তারপরে সেই কীওয়ার্ডগুলি ব্যবহার করে একটি ফ্লিকারবম্বআইমেজ মডেল তৈরি করছি। ফ্লিকারআইমেজ সংগ্রহে যখন কোনও ফ্লিকারআইমেজ যুক্ত করা হয় তখন আমরা চলমান .addImage () ফাংশনটিকেও বাধ্য করি। এই ফাংশনটি আমাদের চিত্র নির্বাচক ফ্লাইআউটে সদ্য যুক্ত হওয়া ফ্লিকারআইমেজ যুক্ত করবে। সর্বশেষ এবং সর্বাধিক গুরুত্বপূর্ণ লাইনটি বর্তমানে নির্বাচিত ফ্লিকারআইমেজ পরিবর্তিত হলে .updateSrc () ফাংশনটিকে ফায়ার করতে বাধ্য করে। যখন বর্তমান চিত্রটি মডেলটিতে পরিবর্তিত হবে, তখন এই ফাংশনটি চলবে, চিত্রের উপাদানটির সিআরসি বৈশিষ্ট্যটি আপডেট করবে এবং সিএসএসের আকার পরিবর্তন করবে এবং ব্যবহারকারীর দ্বারা নির্দিষ্ট করা চিত্রের মাত্রার মধ্যে চিত্রটি ক্রপ করবে।

ইভেন্টস: {"ক্লিক করুন .সেটআপআইকন": "ক্লিকসেটআপ", "ক্লিক করুন .ফ্লিকারবম্বফ্লাইআউট এ.ফোটো": "সিলেক্ট ইমেজ", "ক্লিক করুন .ফ্লিকারবম্বফ্লাইআউট a.next": "NextFlickrPhotos", "ক্লিক করুন। "

.Initialize () অনুসরণ করে আমাদের দেখতে দেখার আচরণের অংশটি রয়েছে। ব্যাকবোন ইভেন্ট অবজেক্ট ব্যবহার করে ইভেন্টগুলিকে আবদ্ধ করার একটি সুবিধাজনক উপায় সরবরাহ করে। ইভেন্টের অবজেক্টটি ভিউ এলিমেন্টের সাথে আসল বাঁধার জন্য jQuery .delegate () পদ্ধতি ব্যবহার করে, যাতে আপনি ভিউয়ের অভ্যন্তরের উপাদানটির সাথে যে কোনও ম্যানিপুলেশন করেন না কেন, আপনার সমস্ত আবদ্ধ ইভেন্টগুলি এখনও কাজ করবে। এটি ঠিক jQuery .live () এর মতো কাজ করে, পুরো ডকুমেন্টে ইভেন্টগুলি আবদ্ধ করার পরিবর্তে আপনি এটিকে যে কোনও উপাদানের আওতায় বেঁধে রাখতে পারেন। ইভেন্ট অবজেক্টে প্রতিটি প্রবেশের কীটি ইভেন্ট এবং নির্বাচককে নিয়ে গঠিত হয়, মানটি সেই ক্রিয়াকে নির্দেশ করে যা সেই ইভেন্টের সাথে আবদ্ধ হতে হবে। নোট করুন যে .delegate () জমা দেওয়ার মতো কিছু ইভেন্টের সাথে কাজ করে না, সমর্থিত ইভেন্টগুলির সম্পূর্ণ তালিকার জন্য jQuery .live () ডকুমেন্টেশন দেখুন।

রেন্ডার: ফাংশন () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); এটি ফিরিয়ে দিন;

শেষ অবধি, আমাদের .reender () ফাংশনটি রয়েছে যা আমাদের মার্কআপ তৈরি করতে এবং এমন কোনও অতিরিক্ত কাজ করার জন্য দায়ী যা ভিউ মার্কআপটি ভিউ এলিমেন্টে যোগ না করা পর্যন্ত সম্পাদন করা যায় না। আমরা আমাদের টেমপ্লেটটি রেন্ডার করার পরে, আমাদের ফ্লিকারবম্বআইমেজে .fetch () কল করতে হবে। .fetch () হ'ল একটি ব্যাকবোন ফাংশন যা অধ্যবসায় স্তর থেকে মডেলের সর্বশেষ প্রতিলিপি পায়। আমরা যদি আগে এই মডেলটি সংরক্ষণ করে থাকি তবে .fetch () এখন সেই তথ্যটি পুনরুদ্ধার করবে। চিত্রটি আনার পরে এটিকে সঠিকভাবে পজিশনে আমাদের রিসাইজ করতে হবে।

হোম স্ট্রেচ

সমস্ত টুকরো জায়গায় রেখে, এখনই আমাদের যা করা দরকার তা হল পৃষ্ঠায় স্থানধারক চিত্রগুলি সন্ধান করা এবং রেন্ডার করা ফ্লিকারবম্বআইমেজ দর্শনগুলির সাথে তাদের প্রতিস্থাপন করুন।

। ("img [src ^ = 'ফ্লিকার: //']")। (ফাংশন () {var img = $ (এটি), ফ্লিকারবম্বআইমেজ ভিউ = নতুন ফ্লিকারবম্বআইমেজভিউ ({img: img}); img.replaceWith (ফ্লিকারবম্বআইমেজভিউ)। রেন্ডার ()। এল);});

এই ছোট্ট স্নিপটি পৃষ্ঠার নীচে বা ডকুমেন্টের জন্য প্রস্তুত কলব্যাকে চালানো দরকার, যাতে এটি প্রতিস্থাপন করবে এমন স্থানধারীর চিত্রগুলি খুঁজে পেতে পারে। ফ্লিকারের চিত্রগুলি দিয়ে পপুলেশন করা উচিত তা বোঝানোর জন্য আমরা কোনও চিত্র ট্যাগের src বৈশিষ্ট্যে ফ্লিকার: // [কেইওয়ার্ড] নির্দিষ্ট করার কনভেনশন ব্যবহার করি। আমরা মিলে যাওয়া এসআরসি বৈশিষ্ট্যের সাথে চিত্রের উপাদানগুলি খুঁজে পাই, একটি নতুন ফ্লিকারবম্বআইমেজভিউ তৈরি করি এবং তারপরে চিত্রটি আমাদের সাথে প্রতিস্থাপন করি। আমরা মূল চিত্রটির একটি অনুলিপি ধরে এটিকে আমাদের ফ্লিকারবম্বভিউতে পাস করি, যাতে আমরা কিছু অতিরিক্ত কনফিগারেশন বিকল্পগুলি টানতে পারি যা উপাদানটির উপর নির্দিষ্ট করা হতে পারে।

এই সমস্ত কঠোর পরিশ্রমের শেষ ফলাফলটি লাইব্রেরি ব্যবহারকারীদের জন্য একটি খুব সাধারণ এপিআই। তারা কেবল ফ্লিকার: // কনভেনশন ব্যবহার করে চিত্রের ট্যাগগুলি সংজ্ঞায়িত করতে পারে, তাদের পৃষ্ঠার নীচে ফ্লিকারবম্ব কোডটি ফেলে দিতে পারে এবং বাম, তারা ফ্লিকার থেকে স্থানধারক চিত্র পেয়েছে।

বড় ওল ওয়েব অ্যাপ্লিকেশনগুলির সাথে দুর্দান্ত কাজ করে

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

আমরা এই বছরের শুরুতে দুর্দান্ত সাফল্যের সাথে পরিবর্তনগুলি চালু করেছি এবং তখন থেকেই ব্যাকবোনগুলির প্রশংসা গাইছি।

অতিরিক্ত সম্পদ

আমি এই নিবন্ধে যা কভার করেছি তার চেয়ে অনেক বেশি রয়েছে ব্যাকবোন, এমভিসি (সিডির মডেল ভিউ কন্ট্রোলার) এর সি (কন্ট্রোলার) স্টার্টারদের জন্য অংশ, যা সর্বশেষতম সংস্করণে আসলে একটি আর (রাউটার)। এবং এটি সমস্ত ব্যাকবোন ডকুমেন্টেশনে আচ্ছাদিত, শনিবার সকালে একটি হালকা পড়া:
ডকুমেন্টক্লাউড.github.com/backbone/

যদি আরও প্রচলিত টিউটোরিয়ালগুলি আপনার জিনিস হয় তবে ব্যাকবোনটিতে লিখিত এই টুডো অ্যাপ্লিকেশনটির খুব ভাল নথিভুক্ত কোডটি দেখুন:
ডকুমেন্টক্লাউড.github.com/backbone/docs/todos.html