Փոխազդեցությունն արագացնելու համար օգտագործեք Backbone.js

Բովանդակություն

• Եկեք սկսենք ուրեմն
• Մեր առաջին մոդելը
• Պատկերների հավաքածու
• FlickrBombImage- ը
• Դիտման շերտը
• FlickrBombImageView- ը
• Տնային ձգվողը
• Հիանալի է աշխատում նաև մեծ ol վեբ ծրագրերի հետ
• Լրացուցիչ ռեսուրսներ

Եթե ​​ցանկանում եք արագ ստեղծել JavaScript- ի մի փոքր գործիք, ապա հավանաբար չեք մտածում շրջանակի օգտագործման մասին: Ավելի հեշտ է կոտրել միասին մի քանի jQuery կոդ, քան տեղադրել և սովորել նոր շրջանակ, այնպես չէ՞: Սխալ, Backbone.js- ը գերթեթև սոսինձի շրջանակ է, որը նման է սովորական հին JavaScript- ին, որը սովոր էիք գրել:

Մենք այստեղ շատ ստատիկ նախատիպեր ենք անում ZURB- ում, քանի որ սիրում ենք էջեր սեղմել ՝ առանց որևէ հետին ծածկագիր գրելու: Հաճախ մենք նետում էինք խիտ մոխրագույն տեղապահի պատկերներ, կամ երբեմն գնում էինք Flickr- ի որոնման նմուշների պատկերներ ՝ օգնելու մեզ պատկերացնել, թե ինչ կարող է լինել վերջնական նախագծում: Դա կլինի մինչև մի կախարդական ուրբաթ, երբ մենք որոշեցինք, որ հրաշալի կլինի գրել ինչ-որ JavaScript ՝ մեր խնդիրները լուծելու համար: Մենք ուզում էինք Flickr- ում լուսանկարներ որոնել և ընտրել, անմիջապես դրանց պահման պատկերներից: Մենք դա կանվանեինք FlickrBomb, և սա այն պատմությունն է, թե ինչպես ենք այն կառուցել ՝ օգտագործելով Backbone.js:

Խստորեն խորհուրդ է տրվում կարդալուց առաջ արագ նայել FlickrBomb- ին: Դա մեկն է `« կտտոցի արժեքը հազար բառ է »տեսակի գործարքների: Առաջ, մենք կսպասենք:

Այս օրերին բլոկում կան բազմաթիվ JavaScript շրջանակներ ՝ SproutCore, JavaScriptMVC, Spine, Sammy, Knockout: Բայց այս կոնկրետ նախագծի համար մեզ դուր եկավ Backbone.js- ը `մի քանի տարբեր պատճառներով.

1. Թեթև է (իրականում 100% յուղազերծ)

• քաշով, իսկ վերջին փաթեթավորված տարբերակը ՝ մոտ 4.6 կգ
• ծածկագրով, լինելով ընդամենը ավելի քան 1000 տող կոդ, այնքան էլ դժվար չէ հետևել բուրգի հետքին ներսից ՝ առանց միտքը կորցնելու

2. Կարծես JavaScript լինի

• քանի որ դա JavaScript է, վերջ և վերջ
• այն օգտագործում է jQuery, որը այս օրերին նույնիսկ տատիկդ գիտի

3. Սուպեր պարզ համառություն

• տուփից դուրս այն տվյալների պահպանում է հետին պլանով (REST- ի միջոցով), բայց մեկ լրացում թողնելով `այն կփրկի տեղական պահեստում
• քանի որ այն վերացնում է համառության API- ն, մենք կարող ենք այն շարունակել մինչև ՀԱՆԳՍՏՅԱՆ հետադարձ ՝ պարզապես հեռացնելով տեղական պահեստի plug-in- ը

Եկեք սկսենք ուրեմն

Քանի որ Backbone.js- ը պարզապես JavaScript է, մեզ մնում է ընդամենը ներառել այն էջում ՝ Underscore.js- ի հետ միասին: jQuery- ն ինքնին կոշտ կախվածություն չէ, բայց մենք այն կօգտագործենք, այնպես որ այն կներառենք այստեղ: Մենք նաև կապելու ենք տեղական պահեստի plug-in- ը, քանի որ չենք ցանկանում դժվարություններ ստեղծել հետին պլան տեղադրելու հետ: Նկատի ունեցեք, որ ֆայլերն ուղղակիորեն կապում էին այստեղ պարզության համար, բայց արտադրության մեջ միշտ պետք է հյուրընկալեք ձեր սեփական ակտիվները:

սցենար src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> / սցենար> սցենար src = "http://documentcloud.github.com/backbone/ backbone-min.js "> / script> script src =" http://documentcloud.github.com/underscore/underscore-min.js "> / script> script src =" https://raw.github.com/ jeromegn / Backbone.localStorage / master / backbone.localStorage-min.js "> / script>

Այս հոդվածի բոլոր հետևյալ ծածկագրերը բնորոշ են մեր ծրագրին, ուստի այն կարող ենք ներառել app.js ֆայլում կամ պարզապես ներդնել, եթե դա ձերն է: Պարզապես հիշեք, որ այն ներառեք «Ողնաշար» -ից հետո: Ողնաշարավորումը հնարավորություն է տալիս վերացնել մեր ծրագրի որոշ մասեր ՝ դրանք և՛ մոդուլային դարձնելով, և՛ ավելի հեշտ օգտագործելով, և՛ ավելի ընթեռնելի ուրիշների համար: Այդ աբստրակցիան լավագույնս պատկերավորելու համար պատրաստվում էին բացատրել FlickrBomb- ի դիզայնը ներքևից վերև ՝ սկսած մոդելներից և ավարտելով տեսակետներով:

Մեր առաջին մոդելը

Առաջին խնդիրը, որը պատրաստվում էին լուծել, լուսանկարները Flickr- ից քաշելն է: FlickrImage- ի ողնաշարի մեջ մոդելավորումը բավականին պարզ է, մենք կստեղծենք նոր մոդել, որը կկոչվի FlickrImage և կավելացնենք որոշ մեթոդներ, որոնք կօգնեն մեզ ստանալ տարբեր չափի բութ մատներ:

var FlickrImage = Backbone.Model.extend ({fullsize_url: function () {return this.image_url ('medium');}, thumb_url: function () {return this.image_url ('հրապարակ');}, image_url: function () չափ) {var size_code; անջատիչ (size) {case 'square': size_code = '_s'; break; // 75x75 case 'medium': size_code = '_z'; break; // 640 ամենաերկար կողային պատյանով 'large ': size_code =' _b '; ընդմիջում; // 1024 ամենաերկար կողմի լռելյայն. size_code =' ';} վերադարձնել "http: // farm" + this.get (' farm ') + ".static.flickr.com / "+ this.get ('սերվեր") + "/" + this.get (' id ') + "_" + this.get (' գաղտնի ') + size_code + ".webp";}})

Ողնաշարի մեջ մոդելները օբյեկտներ են, որոնք հնարավոր է պահպանել և ունեն դրանց հետ կապված որոշ գործառույթներ, ինչպես MVC այլ շրջանակների մոդելները: Backbone մոդելների կախարդական մասն այն է, որ մենք կարող ենք իրադարձությունները կապել ատրիբուտների հետ, այնպես որ, երբ այդ հատկությունը փոխվի, մենք կարողանանք թարմացնել մեր տեսակետները ՝ դա արտացոլելու համար: Բայց մենք ինքներս մեզանից մի փոքր առաջ ենք ընկնում:

Երբ մենք նկարները քաշում ենք Flickr- ից, մենք կստանանք բավարար տեղեկատվություն `բոլոր չափերի համար URL- ներ ստեղծելու համար: Այնուամենայնիվ, այդ ժողովը մնում է մեզ վրա, ուստի մենք իրականացրեցինք .image_url () գործառույթը, որը վերցնում է չափի պարամետրը և վերադարձնում է հանրային հղումը: Քանի որ սա ողնաշարի մոդել է, մենք կարող ենք օգտագործել this.get () մոդելի հատկանիշները մուտք գործելու համար: Այսպիսով, այս մոդելի միջոցով մենք կարող ենք կատարել հետևյալը ծածկագրի այլ վայրում ՝ Flickr պատկերի URL ստանալու համար:

flickrImage.image_url («մեծ»)

Բավական հակիրճ, հա՞: Քանի որ այս մոդելը բնորոշ է մեր ծրագրին, մենք կավելացնենք փաթաթման որոշ գործառույթներ ՝ լրիվ չափի և բութ պատկերի չափերի համար:

Պատկերների հավաքածու

FlickrBomb- ը զբաղվում է պատկերների, ոչ թե մեկ պատկերների հավաքածուներով, և Backbone- ն ունի դրա ձևավորման հարմար միջոց: Collectionիշտ անվանված Հավաքածուն այն է, ինչ մենք կօգտագործենք Flickr- ի պատկերները խմբավորելու համար մեկ տեղապահի համար:

var FlickrImages = Backbone.Collection.extend ({մոդել: FlickrImage, բանալի ՝ flickrbombAPIkey, էջ ՝ 1, վերցնել ՝ ֆունկցիա (հիմնաբառեր, հաջողություն) {var self = սա; հաջողություն = հաջողություն || $. noop; this.keywords = հիմնաբառեր || this.keywords; $ .ajax ({url: 'http://api.flickr.com/services/rest/', տվյալներ ՝ {api_key: self.key, ձևաչափ ՝ 'json', եղանակ ՝ 'flickr. photos.search ', պիտակներ ՝ this.keywords, per_page: 9, էջ ՝ this.page, լիցենզիա ՝ flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', հաջողություն ՝ գործառույթ (պատասխան) ​​{self.add (պատասխան . լուսանկարներ. լուսանկար); հաջողություն ();}});}, հաջորդ էջ. ֆունկցիա (հետադարձ կապ) {this.page + = 1; this.remove (this.models); this.fetch (null, callback);}, prevPage: գործառույթ (հետադարձ պատասխան) ​​{if (this.page> 1) {this.page - = 1;} this.remove (this.models); this.fetch (null, callback);}});

Այստեղ պետք է նշել մի քանի բան: Նախ և առաջ մոդելը հատկանիշը պատմում է հավաքածուներին, թե ինչ տեսակի մոդել է հավաքում: Մենք ունենք նաև որոշ ատրիբուտներ, որոնք նախաձևակերպելու համար օգտագործեցինք ավելի ուշ. Բանալին մեր Flickr API բանալին է, դուք կցանկանաք փոխարինել flickrbombAPIkey- ին ձեր սեփական Flickr API ստեղնի տողով: Flickr API ստեղն ստանալը անվճար է և հեշտ, պարզապես հետևեք այս հղմանը ՝ www.flickr.com/services/api/misc.api_keys.html: Էջի հատկանիշը Flickr- ի լուսանկարների ներկա էջն է, որի վրա մենք գտնվում ենք:

Այստեղ մեծ մեթոդն է .fetch (), որը վերացնում է Flickr API- ից լուսանկարներ քաշելու մանրամասները: Միջդիրքային հարցումների հետ կապված խնդիրներից խուսափելու համար մենք օգտագործում ենք JSONP, որին աջակցում են ինչպես Flickr API- ն, այնպես էլ jQuery- ն: Մյուս պարամետրերը, որոնք մենք անցնում ենք API- ին, պետք է ինքնաբացատրվեն: Հատուկ հետաքրքրություն են ներկայացնում այստեղ «Ողնաշարի» գործառույթները: Հաջողության հետադարձ կապում մենք օգտագործում ենք .add () գործառույթը, որը վերցնում է մոդելի հատկությունների զանգվածը, այդ հատկություններից ստեղծում է մոդելի օրինակներ և այնուհետև ավելացնում հավաքածուին:

.NextPage () և .prevPage () գործառույթները նախ փոխում են այն էջը, որը մենք ցանկանում ենք ցուցադրել,
օգտագործել հավաքածուի գործառույթը .հեռացնել () ՝ առկա բոլոր մոդելները հեռացնելու համար
հավաքածուն, այնուհետև զանգահարել վերցնել ՝ ընթացիկ էջի լուսանկարները ստանալու համար (որը մենք հենց հիմա)
փոխվել է):

FlickrBombImage- ը

Վերադարձի ճանապարհով աշխատելու համար մեզ անհրաժեշտ է ևս մեկ մոդել, որը կներկայացնի տեղապահի պատկերը, որը բաղկացած կլինի FlickrImages- ի հավաքածուից և ընտրված ներկա FlickrImage- ից: Մենք այս մոդելը կանվանենք FlickrBombImage:

var localStorage = (աջակցում է_լոկալ_պահեստը ()): նոր խանութ ("flickrBombImages"): this.flickrImages.fetch (this.get ('հիմնաբառեր'), this.loadFirstImage); this.set (id: this.get ("id")); this.bind ('change: src', this.changeSrc) ;}, changeSrc: function () {this.save ();}, loadFirstImage: function () {if (this.get ('src') === չսահմանված) {this.set ({src: this.flickrImages): առաջին (). image_url ()});}}});

Քանի որ այս մոդելը պատասխանատու է էջի բեռների միջև ներկայումս ընտրված պատկերը հետևելու համար, դրա համար հարկավոր է իմանալ, թե ինչ է օգտագործել localstorage խանութը:Առաջին տողը կապահովի տեղական պահեստավորման աջակցություն, այնուհետև կստեղծի խանութ, որը մենք կօգտագործենք ընտրված պատկերը պահպանելու համար:

Ողնաշարավորումը թույլ է տալիս մեզ սահմանել .initialize () գործառույթ, որը կկանչվի, երբ ստեղծվի մոդելի օրինակ: Մենք օգտագործում ենք այս գործառույթը FlickrBombImage- ում `FlickrImages հավաքածուի նոր օրինակ ստեղծելու համար, անցնելու համար այն հիմնաբառերի, որոնք կօգտագործվեն այս պատկերի համար, և այնուհետև նկարները բերենք Flickr- ից:

.LoadFirstImage () ֆունկցիան փոխանցվել է որպես հետադարձ կապ ՝ գործարկման ժամանակ պատկերները բեռնված են Flickr- ից: Ինչպես հավանաբար կարող եք կռահել, այս ֆունկցիան սահմանում է, որ ներկայիս պատկերը լինի առաջինը Flickr- ի հավաքածուի մեջ: Դա չի արվում, եթե ներկայիս պատկերն արդեն դրված է:

Մենք նաև պատրաստվում ենք օգտագործել Backbone- ի ատրիբուտի հետադարձ պատասխանները մեր .changeSrc () ֆունկցիան գործարկման համար, երբ այս մոդելի src հատկանիշը փոխվի: Այս հետադարձ կապը միայն զանգահարելն է .save (), ողնաշարի մոդելի գործառույթ, որը շարունակում է պահպանել մոդելի հատկությունները ցանկացած պահուստային շերտի վրա, որն իրականացվել է (մեր դեպքում ՝ տեղական խանութ): Այս եղանակով, երբ ընտրված պատկերը փոխվում է, այն անմիջապես պահպանվում է:

Դիտման շերտը

Այժմ, երբ մենք գրեցինք հետին պլանի (դե, առջևի հետին պլան) բոլոր ծածկագիրը, մենք կարող ենք միասին կազմել Դիտումները: Ողնաշարի մեջ դիտումները մի փոքր տարբերվում են, քան մյուս ավանդական MVC շրջանակներում: Չնայած դիտումը սովորաբար վերաբերում է միայն ներկայացմանը, Backbone View- ը պատասխանատու է նաև վարքի համար: Դա նշանակում է, որ ձեր տեսակետը ոչ միայն սահմանում է, թե ինչպես է ինչ-որ բան նայում, այլև այն, ինչ պետք է անի այն ժամանակ, երբ փոխազդում եք:

Դիտումը սովորաբար (բայց ոչ միշտ է) կապված է որոշ տվյալների հետ և անցնում է երեք փուլեր `այդ տվյալներից ներկայացման նշում ստեղծելու համար.

1. View օբյեկտը նախանշվում է, և ստեղծվում է դատարկ տարր:
2. Կատարվում է մատուցման գործառույթը, որը առաջացնում է դիտման նշանշում ՝ այն տեղադրելով նախորդ քայլում ստեղծված տարրի մեջ:
3. Տարրը կցված է DOM- ին:

Սա կարող է թվալ, որ շատ աշխատանք է որոշակի նշագրում առաջացնելու համար, և մենք դեռևս չենք դիտում վարքի մասը, բայց դա կարևոր է, և ահա թե ինչու: Ամեն անգամ, երբ փոփոխում եք DOM- ի տարրերը, դուք գործարկում եք զննարկչի վերափոխում կոչվող մի բան: Վերալիցքավորումը զննարկիչն է, որը վերահաշվարկում է, թե ինչպես է էջում տեղադրված յուրաքանչյուր բան տեղադրված: Owsննարկչի վերամեկնարկումը կարող է վատ լինել կատարման համար, եթե այն կանչվում է քաշելիս կամ չափափոխել իրադարձությունը, որը կրակում է շատ կարճ ժամանակահատվածում, բայց ավելի վատ, նրանք անփույթ են թվում: Էջի բարդ մանիպուլյացիայի միջոցով դուք իրականում կարող եք տեսնել, թե ինչպես են տարրերը ավելացվում էջում, և էֆեկտավորված տարրերը վերադասավորվում են: Հետևելով Backbone- ի նախնական նկարագրմանը, մատուցմանը և կցմանը, դուք երաշխավորում եք մեկ բեռնաթափում, և էջի փոփոխությունները կլինեն ընկալելիորեն ակնթարթորեն ՝ անկախ տարրերի մանիպուլյացիայի բարդությունից:

FlickrBombImageView- ը

var FlickrBombImageView = Backbone.View.extend ({tagName: "div", className: "flickrbombContainer", կողպեք ՝ false, կաղապար: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), նախնական: գործառույթը (ընտրանքներ) {_.bindAll (սա,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var հիմնաբառեր = ընտրանքներ: img.attr ('src') .փոխարինել ('flickr: //', ''); սա. $ el = $ (this.el); this.image = new FlickrBombImage ({հիմնաբառեր. հիմնաբառեր, id: ընտրանքներ. img.attr ('id')}); this.image.flickrImages.bind ('ավելացնել', this.addImage); this.image.bind ('change: src', this.updateSrc);}, իրադարձություններ ՝ { "կտտացրեք .setupIcon" ՝ "կտտացրեք Setet", "կտտացրեք .flickrbombFlyout a.photo": "selectImage", "կտտացրեք .flickrbombFlyout a.next": "nextFlickrPhotos", "կտտացրեք .flickrbombFlyout a.prev": "prevFlickrPhotos"}, մատուցել ՝ function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); վերադարձնել this;}, ...});

Այս տեսակետի գործառույթները հանվել են հակիրճության համար. Սկզբնաղբյուրն ամբողջությամբ հասանելի է GitHub- ում ՝ github.com/zurb/flickrbomb

Դիտման վերևում մենք ունենք BackԿյունքի հատուկ զույգ հատկանիշներ: tagName- ը և className- ն օգտագործվում են այն պիտակը և դասը սահմանելու համար, որոնք կկիրառվեն այս View- ի տարրի վրա: Հիշեք, որ View ստեղծման առաջին քայլը օբյեկտ ստեղծելն է, և քանի որ այդ ստեղծագործությունը վարում է Backbone- ը, մենք պետք է նշենք տարրը և դասը: Նկատի ունեցեք, որ «Ողնաշար» -ը ունի խելամիտ դեֆոլտներ. եթե մենք բաց ենք թողնում այս հատկանիշները, ապա div- ն օգտագործվում է լռելյայն, և ոչ մի դաս չի կիրառվի, եթե չնշեք մեկը:

Կաղապարի հատկանիշը պայմանական է, բայց պարտադիր չէ: Մենք այն օգտագործում ենք այստեղ ՝ JavaScript ձևանմուշի գործառույթը ճշգրտելու համար, որը մենք կօգտագործենք այս տեսքի համար մեր նշագրումն առաջացնելու համար: Մենք օգտագործում ենք _.template () գործառույթը, որը ներառված է Underscore.js- ում, բայց դուք կարող եք օգտագործել այն նախընտրած շարժիչ շարժիչը, որը մենք ձեզ չենք դատի:

Մեր .initialize () գործառույթում մենք դուրս ենք հանում հիմնաբառերի տողը պատկերի պիտակից, ապա ստեղծում ենք FlickrBombImage մոդել ՝ օգտագործելով այդ հիմնաբառերը: Մենք նաև կապում ենք .addImage () գործառույթը, որը պետք է գործարկվի, երբ FlickrImage ավելացվի FlickrImages հավաքածուին: Այս գործառույթը կավելացնի նոր ավելացված FlickrImage- ը մեր պատկերի ընտրիչի թռիչքին: Վերջին և ամենակարևորը տողը կապում է .updateSrc () ֆունկցիան կրակից, երբ ընտրված FlickrImage- ը փոխվի: Երբ ներկայիս պատկերը փոխվում է մոդելի մեջ, այս գործառույթը գործարկվելու է, թարմացնում է պատկերի տարրի src հատկանիշը, և CSS- ը չափափոխում և կտրում է պատկերը, որպեսզի տեղավորվի օգտագործողի կողմից նշված պատկերի չափսերի մեջ:

իրադարձություններ. "}

.Initialize- ից հետո մենք ունենք View- ի վարքի մասը: Ողնաշարն ապահովում է իրադարձությունների կապման հարմար միջոց `օգտագործելով իրադարձությունների օբյեկտ: Իրադարձությունների օբյեկտը օգտագործում է jQuery .delegate () մեթոդը ՝ View տարրին փաստացի պարտադիր կատարելու համար, այնպես որ անկախ այն բանից, թե ինչ մանիպուլյացիա եք անում դիտման ներսում գտնվող տարրին, ձեր բոլոր կապված իրադարձությունները դեռ աշխատելու են: Այն աշխատում է ճիշտ այնպես, ինչպես jQuery .live (), բացառությամբ, որ իրադարձությունները ամբողջ փաստաթղթին կապելու փոխարեն, դրանք կարող եք կապել ցանկացած տարրի շրջանակներում: Իրադարձությունների օբյեկտի յուրաքանչյուր գրառման բանալին բաղկացած է իրադարձությունից և ընտրողից, արժեքը ցույց է տալիս այդ գործառույթը, որը պետք է կապված լինի այդ իրադարձության հետ: Նկատի ունեցեք, որ .delegate () - ը չի աշխատում որոշ իրադարձությունների հետ, ինչպիսիք են ներկայացնելը, տես jQuery .live () փաստաթղթերը `աջակցվող իրադարձությունների ամբողջական ցուցակի համար:

մատուցել ՝ function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); վերադարձնել սա;}

Վերջապես, մենք ունենք .render () գործառույթը, որը պատասխանատու է մեր նշագրումը ստեղծելու և ցանկացած լրացուցիչ աշխատանք կատարելու համար, որը հնարավոր չէ կատարել, քանի դեռ View նշումը չի ավելացվել View տարրին: Մեր ձևանմուշը ներկայացնելուց հետո մենք պետք է զանգահարենք .fetch () մեր FlickrBombImage- ում: .fetch () - ը Backbone ֆունկցիա է, որը կայունության շերտից ստանում է մոդելի վերջին օրինակը: Եթե ​​նախկինում մենք պահպանեինք այս մոդելը, .fetch () - ը հիմա կվերականգներ այդ տվյալները: Պատկերը վերցնելուց հետո մենք պետք է զանգահարենք չափափոխել ՝ այն ճիշտ տեղադրելու համար:

Տնային ձգվողը

Բոլոր կտորները տեղում ունենալով `մեզ մնում է միայն գտնել էջում տեղապահի պատկերները և դրանք փոխարինել տրված FlickrBombImage դիտումներով:

$ ("img [src ^ = 'flickr: //']"): յուրաքանչյուր (գործառույթ () {var img = $ (սա), flickrBombImageView = նոր FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView): մատուցել (). էլ);});

Այս փոքրիկ դիպուկահարը պետք է գործարկվի էջի ներքևում կամ փաստաթղթում պատրաստի հետադարձ կապի մեջ ՝ ապահովելու համար, որ այն կարող է գտնել տեղապահի պատկերները, որոնք կփոխարինի: Մենք օգտագործում ենք flickr: // [KEYWORD] նշման պայմանականությունը պատկերի պիտակի src հատկանիշում ՝ նշելու համար, որ դրանք պետք է լրացվեն Flickr- ի պատկերներով: Մենք գտնում ենք պատկերի տարրեր, որոնք համապատասխանում են src հատկանիշին, ստեղծում ենք նոր FlickrBombImageView, այնուհետև պատկերը փոխարինում ենք մերով: Մենք վերցնում ենք բնօրինակի պատկերի պատճենը և փոխանցում այն ​​մեր FlickrBombView- ին, որպեսզի կարողանանք կազմաձևման որոշ լրացուցիչ ընտրանքներ քաշել, որոնք կարող են նշված լինել տարրի վրա:

Այդ ամբողջ քրտնաջան աշխատանքի վերջնական արդյունքը շատ պարզ API է գրադարան օգտագործող մարդկանց համար: Նրանք կարող են պարզապես սահմանել պատկերի պիտակներ ՝ օգտագործելով flickr: // Convention, իրենց էջի ներքևում գցեն FlickrBomb կոդը և բամ, նրանք Flickr- ից ստացել են տեղապահի պատկերներ:

Հիանալի է աշխատում նաև մեծ ol վեբ ծրագրերի հետ

Մենք ունենք մի մեծ Ol վեբ ծրագիր, որը կոչվում է Հատկանշական, որը գրվել է առանց մտահոգվելու հաճախորդի կողմից բովանդակություն ստեղծելու համար: Երբ մենք ուզում էինք կատարել ծրագրի տուրբոյի բաժինները լիցքավորված `բովանդակության հաճախորդի կողմից առաջ բերելով, մենք ընտրեցինք« Ողնաշար »-ը: Պատճառները նույնն էին. Մենք ուզում էինք թեթև քաշ ունեցող շրջանակ, որը կօգնի կազմակերպել ծածկագիրը, բայց ոչ թե ստիպել մեզ վերանայել ամբողջ ծրագիրը:

Մենք այս տարվա սկզբին մեծ հաջողությամբ սկսեցինք փոփոխությունները, և այդ օրվանից երգում ենք Backbones- ի գովասանքը:

Լրացուցիչ ռեսուրսներ

Backbone- ում շատ ավելին կա, քան այն, ինչ ես լուսաբանեցի այս հոդվածում, սկսնակների համար MVC- ի C (վերահսկիչ) մասը (մոդելի դիտման կարգավորիչ), որն իրականում վերջին տարբերակում R (երթուղիչ է): Եվ այդ ամենը ընդգրկված է «Ողնաշարի» փաստաթղթերում, շաբաթ օրը լույս մի առավոտ կարդում է.
documentcloud.github.com/backbone/

Եթե ​​ձեր ավանդույթն ավելի ավանդական ձեռնարկներն են, ապա ստուգեք այս ողբերգության մեջ գրված այս todo հավելվածի շատ լավ փաստաթղթավորված ծածկագիրը.
documentcloud.github.com/backbone/docs/todos.html