مواد
- اس کے بعد شروع کریں
- ہمارا پہلا ماڈل
- تصاویر کا ایک مجموعہ
- فلکربومبیج
- دیکھیں پرت
- فلکربومبیج ویو
- ہوم اسٹریچ
- بڑے او ایل ویب ایپس کے ساتھ بھی عمدہ کام کرتا ہے
- اضافی وسائل
اگر آپ جاوا اسکرپٹ کا ایک چھوٹا سا ٹول جلدی سے تیار کرنا چاہتے ہیں تو ، آپ شاید کسی فریم ورک کو استعمال کرنے کے بارے میں نہیں سوچ رہے ہیں۔ ایک نیا فریم ورک انسٹال کرنے اور سیکھنے کے بجائے کچھ jQuery کوڈ اکٹھا کرنا آسان ہے نا؟ غلط ، بیک بیک ڈاٹ جے ایس ایک انتہائی ہلکا پھلکا گلو فریم ورک ہے جو بالکل باقاعدہ پرانا جاوا اسکرپٹ کی طرح لگتا ہے جیسے آپ لکھتے تھے۔
ہم یہاں زیڈرب میں بہت سارے مستحکم پروٹو ٹائپ کرتے ہیں ، کیوں کہ ہم پسند کرتے ہیں کہ کوئی بھی پس منظر کا کوڈ لکھے بغیر صفحات پر کلک کریں۔ اکثر ، ہم خاک بھری پلیس ہولڈر کی تصاویر چھوڑیں گے ، یا بعض اوقات ہم فلکر کو نمونے کی تصاویر کے لئے تلاش کرنے جاتے تھے تاکہ حتمی مسودہ میں کیا ہوسکتا ہے اس کی مدد سے ہمیں یہ تصور کیا جا.۔ یہ ایک جادوئی جمعہ تک ہے ، جب ہم نے فیصلہ کیا کہ اپنے مسائل کو حل کرنے کے لئے کچھ جاوا اسکرپٹ لکھنا بہت اچھا ہوگا۔ ہم فلکر پر براہ راست پلیس ہولڈر کی تصاویر سے ہی فوٹو تلاش اور منتخب کرنے کے قابل ہونا چاہتے تھے۔ ہم اسے فلکربوم کہتے ہیں ، اور یہ اس کی کہانی ہے کہ ہم نے بیک بون.ایس استعمال کرکے اسے کیسے بنایا۔
یہ بہت سفارش کی جاتی ہے کہ آپ پڑھنے سے پہلے فلکربوم پر ایک سرسری نظر ڈالیں۔ یہ ان میں سے ایک ہے "طرح کے ایک ہزار لفظوں پر کلک" اس طرح کے سودے کرتے ہیں۔ آگے بڑھیں ، ہم انتظار کریں گے۔
ان دنوں بلاک پر جاوا اسکرپٹ کے بہت سے فریم ورکس ہیں ، اسپرٹ کور ، جاوا اسکرپٹ ایم وی سی ، اسپائن ، سیمی ، ناک آؤٹ۔ لیکن ہمیں کچھ خاص وجوہات کی بناء پر اس خاص پروجیکٹ کے لئے بیک بون ڈاٹ جیز پسند آیا:
1. یہ روشنی ہے (حقیقت میں 100٪ چربی سے پاک)
- وزن میں ، جس کا تازہ ترین پیک ورژن 4.6kb ہے
- کوڈ میں ، صرف ایک ہزار لائنوں کا کوڈ ہونے کی وجہ سے ، آپ کو اپنا دماغ کھوئے بغیر ، اندرونی حصے میں ڈھیر کھوج کی پیروی کرنا اتنا مشکل نہیں ہے
2. یہ جاوا اسکرپٹ کی طرح لگتا ہے
- کیونکہ یہ جاوا اسکرپٹ ہے ، بس یہی ہے اور بس
- یہ jQuery استعمال کرتا ہے ، جو ان دنوں بھی آپ کی دادی جانتی ہے
3. سپر آسان استقامت
- باکس سے باہر یہ اعداد و شمار کو پسدید (REST کے ذریعے) برقرار رکھتا ہے ، لیکن ایک پلگ ان میں گرنے سے اس کی جگہ مقامی اسٹوریج میں محفوظ ہوجائے گی۔
- کیونکہ یہ استقامت API کو ختم کردیتا ہے ، لہذا ہم صرف مقامی اسٹوریج پلگ ان کو ہٹا کر آرام سے پیچھے رہ سکتے ہیں۔
اس کے بعد شروع کریں
چونکہ بیک بون ڈاٹ جے صرف جاوا اسکرپٹ ہے ، اس لئے ہمیں اس میں پیج پر انڈرسکور ڈاٹ جے کے ساتھ شامل کرنے کی ضرورت ہے۔ 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/underscore/:30core-min.js "> / اسکرپٹ> اسکرپٹ src =" https://raw.github.com/ jeromegn / backbone.localStorage / master / backbone.localStorage-min.js "> / اسکرپٹ>
اس مضمون میں درج ذیل تمام کوڈ ہماری درخواست کے لئے مخصوص ہیں ، لہذا ہم اسے کسی ایپ js فائل میں شامل کرسکتے ہیں ، یا اگر آپ کی چیز ہے تو صرف ان لائن ان لائن میں شامل کرسکتے ہیں۔ صرف بیک بون کے بعد اسے شامل کرنا یاد رکھیں۔ ریڑھ کی ہڈی ہماری ایپلیکیشن کے خلاصہ حصوں کو قابل بناتا ہے ، تاکہ ان کو دوبارہ استعمال میں آسانی سے ماڈیولر بنایا جاسکے اور دوسروں کو زیادہ پڑھنے کے قابل بنایا جائے۔ اس تجریدی کو بخوبی واضح کرنے کے لئے ، فلکربرم کے ڈیزائن کو نیچے سے سمجھا رہے تھے ، ماڈلز سے شروع ہوکر ، اور نظارے کے ساتھ اختتام پذیر ہوں گے۔
ہمارا پہلا ماڈل
فلکر سے فوٹو کھینچنا ہے پہلے کام سے نمٹنے کے۔ ریڑھ کی ہڈی میں فلکر امیج کا ماڈلنگ کافی آسان ہے ، ہم فلکرائجام کے نام سے ایک نیا ماڈل بنائیں گے ، اور مختلف سائز کے انگوٹھے حاصل کرنے میں ہماری مدد کے لئے کچھ طریقے شامل کریں گے۔
var FlickrImage = Backbone.Model.extend ({fullsize_url: Function () {it.image_url ('میڈیم') واپس لو؛}، thumb_url: تقریب () {لوٹ this.image_url ('مربع')؛}، امیج_ورل: فنکشن ( سائز) {var سائز_ کوڈ switch سوئچ (سائز) {کیس 'مربع': سائز_ کوڈ = '_s'؛ وقفہ؛ // 75x75 کیس 'میڈیم': سائز_ کوڈ = '_ز'؛ وقفہ؛ // سب سے طویل سائڈ کیس پر 640 'بڑے ': size_code =' _b '؛ ब्रेک؛ // 1024 سب سے لمبی سائیڈ ڈیفالٹ پر: سائز_کوڈ =' '؛} "http: // فارم" + this.get (' فارم ') + ".static.flickr.com / "+ this.get ('server') +" / "+ this.get ('id') +" _ "+ this.get ('خفیہ') + سائز_کوڈ +" .webp "؛}})
بیک بون میں ماڈل ایسی اشیاء ہیں جن کو برقرار رکھا جاسکتا ہے ، اور ان کے ساتھ کچھ افعال وابستہ ہیں ، جیسا کہ دوسرے ایم وی سی فریم ورک کے ماڈل کی طرح ہے۔ بیک بون ماڈلز کا جادوئی حصہ یہ ہے کہ ہم واقعات کو صفات سے منسلک کرسکتے ہیں ، تاکہ جب اس وصف میں تبدیلی آئے تو ہم اس کی عکاسی کرنے کے لئے اپنے نظریات کو اپ ڈیٹ کرسکیں۔ لیکن ہم خود سے تھوڑا آگے جا رہے ہیں۔
جب ہم فلکر سے فوٹو کھینچتے ہیں تو ، ہمیں ہر سائز کے لئے یو آر ایل بنانے کے ل enough کافی معلومات حاصل کرنے والے ہیں۔ تاہم ، اسمبلی ہمارے پاس رہ گئی ہے ، لہذا ہم نے .image_url () فنکشن لاگو کیا جو سائز کا پیرامیٹر لیتا ہے اور عوامی لنک واپس کرتا ہے۔ چونکہ یہ ایک ریڑھ کی ہڈی والا ماڈل ہے ، اس لئے ہم ماڈل پر موجود صفات تک رسائی کے ل this اس گیٹ () کو استعمال کرسکتے ہیں۔ لہذا اس ماڈل کے ساتھ ، ہم فلکر امیج کا URL حاصل کرنے کے لئے کوڈ میں درج ذیل کہیں اور کام کرسکتے ہیں۔
flickrImage.image_url (’بڑے‘)
خوبصورت جامع ، ہے نا؟ چونکہ یہ ماڈل ہماری درخواست کے لئے مخصوص ہے ، لہذا ہم پورے سائز اور انگوٹھے کی تصویر کے سائز کے ل wra کچھ ریپر افعال شامل کریں گے۔
تصاویر کا ایک مجموعہ
فلکربوم ایک ہی شبیہیں نہیں بلکہ شبیہہ کے مجموعوں سے متعلق ہے ، اور بیک بون اس ماڈلنگ کا ایک آسان طریقہ رکھتا ہے۔ مناسب طریقے سے جمع کردہ مجموعہ وہی ہے جس کو ہم فلکر تصاویر کو ایک ہی پلیس ہولڈر کے ساتھ گروپ کرنے کے لئے استعمال کریں گے۔
var FlickrImages = Backbone. Collection.extend ({ماڈل: FlickrImage، key: flickrbombAPIkey، صفحہ: 1، بازیافت: فنکشن (کلیدی الفاظ، کامیابی) {var خود = یہ؛ کامیابی = کامیابی || no .نوپ؛ یہ.کی ورڈز = کی ورڈز || this.keyवर्ड؛ aj .Aaxax ({url: 'http://api.flickr.com/services/rest/'، ڈیٹا: {api_key: self.key، format: 'json'، طریقہ: 'فلکر۔ Photos.search '، ٹیگز: this.keyवर्ड ، per_ صفحے: 9 ، صفحہ: this.page ، لائسنس: فلکربوم لائسنس ٹائپس} ، ڈیٹا ٹائپ:' jsonp '، jsonp:' jsoncallback '، کامیابی: فنکشن (ریسپانس) {self.add (جواب) .photos.photo)؛ کامیابی ()؛}})؛}، اگلا صفحہ: فنکشن (کال بیک) {this.page + = 1؛ this.reove (this.models) this this.fetch (null، callback)؛}، اینڈ پیج: فنکشن (کال بیک) {اگر (یہ.پیج> 1) {اس. پیج - = 1؛} اس ڈریو (اس۔موڈلز) this اس.فیچ (کالعدم ، کال بیک)؛}})؛
یہاں ایک دو چیزیں نوٹ کرنے ہیں۔ سب سے پہلے ، ماڈل وصولی مجموعوں کو بتاتی ہے کہ یہ کس قسم کا ماڈل اکٹھا کررہا ہے۔ ہمارے پاس کچھ اوصاف بھی ہیں جن کو ہم نے بعد میں استعمال کے لئے شروع کیا: کلید ہماری فلکر API کلید ہے ، آپ فلکربوم اے پی کیکی کو اپنی فلکر API کلید کی تار کے ساتھ تبدیل کرنا چاہتے ہیں۔ فلکر API کلید حاصل کرنا مفت اور آسان ہے ، صرف اس لنک پر عمل کریں: www.flickr.com/services/api/misc.api_keys.html۔ اس صفحے کا وصف ہم پر چلنے والی فلکر تصاویر کا موجودہ صفحہ ہے۔
یہاں بڑا طریقہ .fetch () ہے ، جو فلکر API سے فوٹو کھینچنے کی تفصیلات کو ختم کردیتا ہے۔ کراس ڈومین درخواستوں سے متعلق مسائل سے بچنے کے ل we ، ہم JSONP استعمال کررہے ہیں ، جو فلکر API اور jQuery دونوں کی حمایت کرتے ہیں۔ دوسرے پیرامیٹرز جن کا ہم API میں گزر رہے ہیں وہ خود وضاحتی ہونا چاہئے۔ یہاں خاص طور پر دلچسپ بات یہ ہے کہ بیک بون افعال کو یہاں بلایا جارہا ہے۔ کامیابی کال بیک میں ہم .add () استعمال کررہے ہیں ، جو ایک فنکشن جو ماڈل کی خصوصیات میں شامل ہوتا ہے ، ان خصوصیات سے نمونہ کی مثال پیدا کرتا ہے اور پھر انھیں مجموعہ میں شامل کرتا ہے۔
.nextPage () اور. prevPage () افعال پہلے اس صفحے کو تبدیل کرتے ہیں جس کو ہم ڈسپلے کرنا چاہتے ہیں ،
جمع کرنے کی تقریب کا استعمال کریں. ختم کریں () ، سے موجودہ تمام ماڈلز کو دور کریں
اکٹھا کریں ، اور پھر موجودہ صفحے کے ل get تصاویر حاصل کرنے کے ل fet بازیافت کو کال کریں (کہ ہم صرف
تبدیل)
فلکربومبیج
بیک اپ کے راستے پر کام کرتے ہوئے ، ہمیں پلیس ہولڈر امیج کی نمائندگی کرنے کے لئے ایک اور ماڈل کی ضرورت ہے ، جس میں فلکر امیجز کا ایک مجموعہ ، اور موجودہ فلِکر امیج جس میں منتخب کیا گیا ہو۔ ہم اس ماڈل کو فلکربومائج کہتے ہیں۔
var لوکل اسٹورج = (سپورٹ_لوکل_ اسٹوریج ())؟ نیا اسٹور ("flickrBombImages"): null؛ var FlickrBombImage = Backbone.Model.extend ({لوکل اسٹورج: لوکل اسٹورج ، انیشلائٹ: فنکشن () {_.bindAll (یہ ، 'لوڈ فرنس آئیج')؛ یہ۔ فلکر آئیجز = نیا فلکر آئیجز () this.flickrImages.fetch (this.get ('Keywords')، this.loadFirstImage) this this.set (id: this.get ("id")) this اس.بائنڈ ('change: src'، this.changeSrc) } change، changeSrc: function () {this.save ()؛ load، لوڈفورسٹ امیج: فنکشن () {اگر (this.get ('src') === وضاحتی) {this.set ({src: this.flickrImages)۔ پہلا (). شبیہ_ورل ()})؛}}})؛
چونکہ یہ ماڈل پیج بوجھ کے درمیان موجودہ منتخب تصویر کی کھوج رکھنے کے لئے ذمہ دار ہے ، لہذا اسے یہ جاننے کی ضرورت ہے کہ مقامی اسٹور اسٹور کو کیا استعمال کرنا ہے۔پہلی لائن اس بات کو یقینی بنائے گی کہ لوکل اسٹورز کے لئے تعاون موجود ہے ، اور پھر وہ اسٹور بنائے گا جسے ہم منتخب کردہ امیج کو برقرار رکھنے کے لئے استعمال کریں گے۔
بیکبون ہمیں ایک .initialize () فنکشن کی وضاحت کرنے کی اجازت دیتا ہے جسے ماڈل کی مثال بننے پر کہا جائے گا۔ ہم فلکر بوم امیج میں اس فنکشن کا استعمال فلکر امیجز کلیکشن کی ایک نئی مثال بنانے کے ل the ، اس کلیدی لفظ کو پاس کرتے ہیں جو اس شبیہ کے لئے استعمال ہوں گے ، اور پھر فلکر سے امیجز لائیں۔
جب فلکر سے تصاویر بھری ہوئی ہیں تو ، لوڈ فلسٹ امیج () فنکشن چلانے کے لئے کال بیک کے طور پر منظور کیا گیا ہے۔ جیسا کہ آپ شاید اندازہ لگا سکتے ہیں ، یہ فنکشن موجودہ تصویر کو فلکر سے جمع کرنے میں پہلی تصویر بناتا ہے۔ یہ کام نہیں کرتا ہے اگر موجودہ تصویر پہلے ہی ترتیب دی گئی ہو۔
جب ہم اس ماڈل کی ایس سی آر کی خصوصیت کو تبدیل کرتے ہیں تو ہم اپنے .چن ایس سی آر () فنکشن کو برطرف کرنے کے لئے بیک بون کی خصوصیت کال بیک کا استعمال بھی کریں گے۔ یہ سب کال بیک کال .save () ہے ، جو ایک بیکبون ماڈل فنکشن ہے جو ماڈل کی خصوصیات کو برقرار رکھتا ہے جو اسٹور پرت کو لاگو کیا جاتا ہے (ہمارے معاملے میں لوکل اسٹور میں)۔ اس طرح ، جب بھی منتخب کردہ تصویر کو تبدیل کیا جاتا ہے ، تو اسے فورا. ہی برقرار رکھا جاتا ہے۔
دیکھیں پرت
اب جب کہ ہمارے پاس تمام پسدید (اچھی طرح سے ، فرنٹ اینڈ بیکینڈ) کوڈ مل گیا ہے ، ہم مل کر ویوز ڈال سکتے ہیں۔ دوسرے روایتی ایم وی سی فریم ورکوں میں بیک بون میں آراء کچھ خاص ہی مختلف ہیں۔ اگرچہ عام طور پر ایک نظریہ صرف اپنے آپ کو پریزنٹیشن سے ہی تشویش رکھتا ہے ، بیک بیک ہڈی ویو بھی رویے کے لئے ذمہ دار ہے۔ اس کا مطلب یہ ہے کہ آپ کا نظارہ نہ صرف اس کی وضاحت کرتا ہے کہ کوئی چیز کس طرح دکھتی ہے ، بلکہ اس کے ساتھ بھی جب بات چیت ہوتی ہے تو اسے کیا کرنا چاہئے۔
ایک نظریہ عام طور پر (لیکن ہمیشہ نہیں) کچھ اعداد و شمار سے منسلک ہوتا ہے ، اور اس ڈیٹا سے پریزنٹیشن مارک اپ پیدا کرنے کے لئے تین مراحل سے گزرتا ہے:
1. ویو آبجیکٹ کا آغاز کیا گیا ہے ، اور ایک خالی عنصر تشکیل دیا گیا ہے۔
2. رینڈر فنکشن کہا جاتا ہے ، پچھلے مرحلے میں تخلیق کردہ عنصر میں داخل کرکے قول کے لئے مارک اپ پیدا کرتا ہے۔
3. عنصر ڈوم سے منسلک ہے۔
ایسا لگتا ہے کہ کچھ مارک اپ پیدا کرنے کے لئے بہت سارے کام محسوس ہوسکتے ہیں ، اور ہم ابھی تک ویو کے رویے والے حصے تک نہیں پہنچے ہیں ، لیکن یہ ضروری ہے ، اور یہاں کیوں ہے۔ جب بھی آپ ڈوم میں موجود عناصر کو تبدیل کرتے ہیں تو ، آپ براؤزر ریفلو نامی کسی چیز کو متحرک کرتے ہیں۔ ایک ریفلو براؤزر کی دوبارہ گنتی کرنا ہے کہ کس طرح صفحے کی ہر چیز کو پوزیشن میں رکھا گیا ہے۔ اگر ڈریگ یا ریسائزائز ایونٹ کے اندر بلایا گیا ہو تو براؤزر کے بہاؤ کی کارکردگی خراب ہوسکتی ہے ، جو بہت ہی مختصر وقفے سے آگ لگتی ہے ، لیکن اس سے بھی بدتر ، وہ میلا لگتے ہیں۔ صفحے کے پیچیدہ ہیرا پھیری کے ساتھ ، آپ واقعتا elements صفحے پر عناصر شامل ہونے اور اثر انداز عناصر کو دوبارہ مرتب کرتے ہوئے دیکھ سکتے ہیں۔ بیک بون کی ابتداء ، نمائش اور منسلک کرنے کے نمونے کے بعد ، آپ ایک ہی ریفلو کی ضمانت دیتے ہیں ، اور صفحہ میں ہونے والی تبدیلیاں عین ہیرا پھیری کی پیچیدگی سے قطع نظر ، فوری طور پر محسوس ہوں گی۔
فلکربومبیج ویو
var FlickrBombImageView = Backbone.View.extend ({TagName: "div"، className: "flickrbombContainer"، لاک: غلط ، ٹیمپلیٹ: _.template ('div id = "٪ = this.image.id.replace (" "، "")٪> "... / div> ') ، ابتداء کریں: فنکشن (اختیارات) {_.bindAll (یہ ،' اڈیمیجج '،' اپ ڈیٹ سی آر سی '،' سیٹ ڈیمینشن '،' اپ ڈیٹ ڈیمینشن ')؛ ور ورڈز = اختیارات۔ img.attr ('src') .replace ('flickr: //'، '') this یہ.. el = $ (this.el) this this.image = نیا فلکربومبیج ({مطلوبہ الفاظ: مطلوبہ الفاظ ، ID: اختیارات۔ img.attr ('id')}) this this.image.flickrImages.bind ('شامل کریں'، this.addImage) this this.image.bind ('تبدیلی: src'، this.updateSrc)؛}، واقعات: { "پر کلک کریں۔ سیٹ اپ آئکن": "کلیک سیٹ اپ" ، "کلک کریں۔ فلکربوم فلائی آو فوٹو": "سلیک آئیمج" ، "کلک کریں ۔فلر بوم فلائ آٹ a.next": "اگلا فلکرپٹوٹس" ، "فلک بوم فلائی آوٹ a.prev": "پرفلک فلٹوٹس"} ، رینڈر: فنکشن () {$ (this.el) .html (this.template ())؛ it.image.fetch ()؛ this.resize ()؛ اس کو لوٹ؛}، ...})؛
اس نقطہ نظر کے افعال کو نسل کشی کے لit چھوڑ دیا گیا ہے ، مکمل طور پر ماخذ کوڈ GitHub پر دستیاب ہے: github.com/zurb/flickrbomb
ویو کے اوپری حصے میں ، ہمارے پاس بیک جوائن کے لئے کچھ خاص خصوصیات ہیں۔ ٹیگ نام اور کلاس نام ٹیگ اور طبقے کی وضاحت کے لئے استعمال ہوتے ہیں جو اس منظر کے عنصر پر لاگو ہوں گے۔ یاد رکھیں کہ دیکھیں تخلیق کا ایک قدم ایک چیز پیدا کر رہا ہے ، اور چونکہ اس تخلیق کو بیک بون نے سنبھالا ہے ، لہذا ہمیں عنصر اور طبقے کی وضاحت کرنے کی ضرورت ہے۔ نوٹ کریں کہ بیک بون میں سمجھدار ڈیفالٹس ہیں۔ اگر ہم ان اوصاف کو چھوڑ دیتے ہیں تو ، ڈی وی ڈی کو بطور ڈیفالٹ استعمال کیا جاتا ہے ، اور اس وقت تک کوئی کلاس لاگو نہیں ہوگا جب تک کہ آپ کسی کی وضاحت نہیں کرتے ہیں۔
ٹیمپلیٹ کا وصف ایک کنونشن ہے ، لیکن اس کی ضرورت نہیں ہے۔ ہم جاوا اسکرپٹ ٹیمپلیٹ فنکشن کی وضاحت کے لئے اسے یہاں استعمال کررہے ہیں ہم اس قول کے لئے اپنا مارک اپ تیار کرنے کے لئے استعمال کریں گے۔ ہم انڈرسکور. جے ایس میں شامل _ٹیمپلٹ () فنکشن استعمال کرتے ہیں ، لیکن آپ جس ٹمپلٹنگ انجن کو ترجیح دیتے ہیں وہ استعمال کرسکتے ہیں ، ہم آپ کا فیصلہ نہیں کریں گے۔
ہماری .Inialialize () فنکشن میں ہم امیج ٹیگ سے کی ورڈز سٹرنگ نکال رہے ہیں ، اور پھر ان کلیدی الفاظ کو استعمال کرکے فلکربوم آئیج ماڈل تشکیل دے رہے ہیں۔ جب فلکر امیج فلکر امیجز کے کلیکشن میں شامل ہوجاتی ہے تو ہم چلنے والی .AdImage () فنکشن کو بھی پابند کر رہے ہیں۔ یہ فنکشن ہمارے امیج سلیکٹر فلائی آؤٹ میں نئے شامل فلکر امیج کو شامل کرے گا۔ آخری اور انتہائی اہم لائن .pdateSrc () فنکشن کو پابند کرنے کے لئے پابند ہے جب اس وقت منتخب کردہ فلکر امیج کو تبدیل کیا جاتا ہے۔ جب موجودہ تصویر کو ماڈل میں تبدیل کیا جائے گا ، تو یہ فنکشن چلے گا ، شبیہہ عنصر کی src وصف کو اپ ڈیٹ کرے گا ، اور سی ایس ایس کا سائز تبدیل کریں اور صارف کے ذریعہ متعین کردہ تصویری طول و عرض میں فٹ ہونے کے ل the تصویر کو کاٹ دیں
واقعات: {"پر کلک کریں۔ سیٹ اپ آئکن": "کلیک سیٹ اپ" ، "کلک کریں ۔فلکربوم فلائی آو فوٹو": "سلیکٹ آئیمج" ، "کلک کریں ۔فلر بوم فلائ آوٹ a.next": "اگلا فلکرپٹوز" ، "کلک کریں۔ فلکربوم فلائی آٹ a.prev": "پرفلک فوٹوٹوٹس "}
.Iitialize () کے بعد ہمارے پاس نظریہ کا روی behaviorہ حصہ ہے۔ بیک بون واقعات کے مقصد کو استعمال کرتے ہوئے واقعات کو باندھنے کا ایک آسان طریقہ فراہم کرتا ہے۔ واقعات کا مقصد jQuery .delegate () طریقہ استعمال کرتا ہے تاکہ ویو عنصر کا اصل پابند کیا جاسکے ، تا کہ نظر کے اندر عنصر کے ساتھ آپ کیا ہیرا پھیری کرتے ہو اس سے قطع نظر ، آپ کے سارے پابند واقعات کام کر سکیں گے۔ یہ صرف jQuery .live () کی طرح کام کرتا ہے ، سوائے اس کے کہ واقعات کو پوری دستاویز پر پابند کرنے کی بجائے ، آپ انہیں کسی بھی عنصر کے دائرہ کار میں باندھ سکتے ہیں۔ واقعات آبجیکٹ میں ہر اندراج کی کلید ایونٹ اور سلیکٹر پر مشتمل ہوتی ہے ، قدر اس فعل کی نشاندہی کرتی ہے جس کو اس واقعے کا پابند ہونا چاہئے۔ نوٹ کریں کہ ڈیلیگیٹ () کچھ پروگراموں کے ساتھ کام نہیں کرتا ہے جیسے سبمیٹ ، jQuery .live () دستاویزات کو تائید شدہ واقعات کی مکمل فہرست کے لئے دیکھیں۔
رینڈر: فنکشن () {$ (this.el) .html (this.template ())؛ this.image.fetch ()؛ this.resize ()؛ اسے واپس کرو؛
آخر میں ، ہمارے پاس .reender () فنکشن موجود ہے جو ہمارا مارک اپ بنانے اور کوئی اضافی کام کرنے کے لئے ذمہ دار ہے جو اس وقت تک انجام نہیں دیا جاسکتا جب تک کہ ویو مارک اپ کو ویو عنصر میں شامل نہ کرلیا جائے۔ ہم اپنے ٹیمپلیٹ کو رینڈر کرنے کے بعد ، ہمیں اپنے فلکر بومبیج پر .fetch () کال کرنے کی ضرورت ہے۔ .fetch () ایک ریڑھ کی ہڈی کا فعل ہے جو مستقل پرت سے ماڈل کی تازہ ترین کاپی حاصل کرتا ہے۔ اگر ہم نے پہلے اس ماڈل کو محفوظ کرلیا ہوتا ، تو .fetch () اب اس ڈیٹا کو بازیافت کرے گا۔ تصویر لانے کے بعد ہمیں اس کی صحیح پوزیشن میں لانے کے لئے ریسائز کال کرنے کی ضرورت ہے۔
ہوم اسٹریچ
جگہ پر موجود تمام ٹکڑوں کے ساتھ ، ہمیں ابھی صفحے پر پلیس ہولڈر کی تصاویر ڈھونڈنے اور انہیں فلکر بومبیج امیج مناظر کے ساتھ تبدیل کرنے کی ضرورت ہے۔
$ ("img [src ^ = 'فلکر: //']") ۔چائیں (فنکشن () {var img = $ (یہ) ، فلکر بومبیج ویو = نیا فلکربومبیج ویو ({img: img}) im img.replaceWith (فلکربوم آئیجج ویو۔ رینڈر (). ایل)؛})؛
اس چھوٹے سے اسنیپ کو صفحے کے نیچے یا کسی دستاویز میں تیار کال بیک میں چلانے کی ضرورت ہے ، تاکہ یہ یقینی بنایا جاسکے کہ وہ جگہ دار کی تصاویر تلاش کرسکتی ہے جو اسے تبدیل کردے گی۔ ہم فلکر کی تصویری کنونشن کا استعمال کرتے ہیں: // [KEYWORD] کو کسی شبیہہ ٹیگ کے src وصف میں یہ بتانے کے لئے کہ اسے فلکر کی تصاویر کے ساتھ آباد کیا جانا چاہئے۔ ہمیں مماثل ایس سی آر کی خصوصیت والے امیج عناصر ملتے ہیں ، ایک نیا فلکربومبیج ویو تشکیل دیتے ہیں اور پھر اس تصویر کو اپنے ساتھ بدل دیتے ہیں۔ ہم اصلی امیج کی ایک کاپی پکڑ کر اپنے فلکربوم ویو کو دیتے ہیں ، تاکہ ہم کچھ اضافی ترتیب کے اختیارات کھینچیں جو عنصر پر بیان کیے گئے ہو۔
اس ساری محنت کا حتمی نتیجہ لائبریری استعمال کرنے والے لوگوں کے لئے ایک بہت ہی آسان API ہے۔ وہ صرف فلکر: // کنونشن کا استعمال کرتے ہوئے تصویری ٹیگوں کی وضاحت کرسکتے ہیں ، فلکربرم کوڈ کو اپنے صفحے کے نیچے چھوڑیں ، اور بام ، انہیں فلکر سے پلیس ہولڈر کی تصاویر ملی ہیں۔
بڑے او ایل ویب ایپس کے ساتھ بھی عمدہ کام کرتا ہے
ہمارے پاس ایک بڑی ol ol web app app have Not Not Not app app app. app app app Not Not called called called called called called called called called called called called called called. called........................................................................................................ بغیر لکھا گیا تھا۔ جب ہم ایپ ٹربو کے سیکشنز کو کلائنٹ سائیڈ تیار کرکے وصول کرنا چاہتے ہیں تو ہم نے بیک بون کا انتخاب کیا۔ وجوہات ایک جیسی تھیں: ہم ضابطہ کو منظم رکھنے میں مدد کے ل a ایک ہلکا پھلکا فریم ورک چاہتے تھے ، لیکن ہمیں پوری درخواست پر نظر ثانی کرنے پر مجبور نہ کریں۔
ہم نے کامیابیوں کے ساتھ اس سال کے شروع میں تبدیلیوں کا آغاز کیا ، اور تب سے ہی بیک بونز کی تعریفیں گاتے آ رہے ہیں۔
اضافی وسائل
اس مضمون میں جو کچھ میں نے شامل کیا ہے اس کے مقابلے میں بیک بون کے پاس اور بھی بہت کچھ ہے ، شروعاتیوں کے لئے MVC (ماڈل ویو کنٹرولر) کا C (کنٹرولر) حصہ ہے ، جو تازہ ترین ورژن میں واقعتا R (روٹر) ہے۔ اور یہ سب بیک بون دستاویزات میں شامل ہے ، ہفتے کی صبح ہلکی روشنی پڑھیں:
دستاویزات کلاؤڈ.github.com/backbone/
اگر مزید روایتی سبق آپ کی چیز ہیں ، تو بیک بون میں لکھے گئے اس ٹوڈو ایپلی کیشن کے بہت اچھے دستاویزی کوڈ کو چیک کریں۔
دستاویزات کلاؤڈ.github.com/backbone/docs/todos.html
