Задаволены
- Давайце пачнем тады
- Наша першая мадэль
- Калекцыя малюнкаў
- FlickrBombImage
- Пласт прагляду
- FlickrBombImageView
- Дом Stretch
- Выдатна працуе з вялікімі вэб-праграмамі
- Дадатковыя рэсурсы
Калі вы хочаце хутка стварыць невялікі інструмент 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 персістэнцыі, мы маглі б захаваць яго да REST-бэкенда, проста выдаліўшы ўбудова лакальнага сховішча
Давайце пачнем тады
Паколькі Backbone.js - гэта толькі JavaScript, нам трэба толькі ўключыць яго разам з Underscore.js на старонку. jQuery сам па сабе не з'яўляецца цяжкай залежнасцю для Backbone, але мы збіраемся яго выкарыстоўваць, таму ўключым яго сюды. Мы таксама падключым убудова лакальнага сховішчы, бо не хочам мітусіцца з наладжваннем бэкэнда. Звярніце ўвагу, што для прастаты яны наўпрост звязвалі файлы тут, але вы заўсёды павінны размяшчаць уласныя актывы ў вытворчасці.
script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> / script> script 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 альбо проста ўбудаваць, калі гэта ваша справа. Проста не забудзьцеся ўключыць яго пасля Backbone. Backbone дазваляе абстрагаваць часткі нашага прыкладання, зрабіць іх модульнымі для зручнага паўторнага выкарыстання і больш зручнымі для чытання. Каб найлепш праілюстраваць гэтую абстракцыю, збіраліся растлумачыць дызайн FlickrBomb знізу ўверх, пачынаючы з мадэляў і заканчваючы відамі.
Наша першая мадэль
Першае заданне, якое збіраліся вырашаць, - гэта выцягванне фатаграфій з Flickr. Мадэляванне FlickrImage у магістралі досыць простае, мы створым новую мадэль пад назвай FlickrImage і дададзім некалькі метадаў, якія дапамогуць нам атрымаць вялікія пальцы.
var FlickrImage = Backbone.Model.extend ({fullsize_url: function () {return this.image_url ('medium');}, thumb_url: function () {return this.image_url ('square');}, image_url: function ( памер) {var size_code; перамыкач (памер) {case 'square': size_code = '_s'; break; // 75x75 case 'medium': size_code = '_z'; break; // 640 на самым доўгім бакавым корпусе 'large ': size_code =' _b '; break; // 1024 на самай доўгай баку па змаўчанні: size_code =' ';} return "http: // farm" + this.get (' farm ') + ".static.flickr.com / "+ this.get ('server') +" / "+ this.get ('id') +" _ "+ this.get ('secret') + size_code +" .webp ";}})
Мадэлі ў Backbone - гэта аб'екты, якія можна захаваць і з імі звязаны некаторыя функцыі, падобна мадэлям у іншых структурах MVC. Чароўная частка мадэляў Backbone заключаецца ў тым, што мы можам прывязваць падзеі да атрыбутаў, каб пры змене гэтага атрыбута мы маглі абнаўляць свае погляды, каб гэта адлюстраваць. Але мы крыху апярэджваем сябе.
Калі мы здымаем фатаграфіі з Flickr, мы збіраемся атрымаць дастаткова інфармацыі для стварэння URL-адрасоў для ўсіх памераў. Аднак зборка застаецца за намі, таму мы рэалізавалі функцыю .image_url (), якая прымае параметр памеру і вяртае агульнадаступную спасылку. Паколькі гэта мадэль магістралі, мы можам выкарыстоўваць this.get () для доступу да атрыбутаў на мадэлі. Такім чынам, з гэтай мадэллю мы можам зрабіць наступнае ў іншым месцы кода, каб атрымаць URL выявы Flickr.
flickrImage.image_url ('вялікі')
Даволі лаканічна, так? Паколькі гэтая мадэль характэрная для нашага прыкладання, мы дадамо некаторыя функцыі абгорткі для поўнага памеру і памеру выявы вялікага пальца.
Калекцыя малюнкаў
FlickrBomb займаецца калекцыямі малюнкаў, а не адзінкавымі выявамі, і Backbone мае зручны спосаб мадэлявання гэтага. Дакладна названая калекцыя - гэта тое, што мы будзем выкарыстоўваць для згрупавання малюнкаў Flickr для аднаго запаўняльніка.
var FlickrImages = Backbone.Collection.extend ({мадэль: FlickrImage, ключ: flickrbombAPIkey, старонка: 1, выбор: функцыя (ключавыя словы, поспех) {var self = this; успех = поспех || $ .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 ', success: function (response) {self.add (response .photos.photo); success ();}});}, nextPage: function (callback) {this.page + = 1; this.remove (this.models); this.fetch (null, callback);}, prevPage: function (callback) {if (this.page> 1) {this.page - = 1;} this.remove (this.models); this.fetch (null, callback);}});
Тут трэба адзначыць пару рэчаў. Па-першае, мадэль атрыбут кажа калекцыям, які тып мадэлі ён збірае. У нас таксама ёсць некаторыя атрыбуты, якія мы ініцыялізавалі для выкарыстання пазней: ключ - гэта наш ключ API Flickr, вы хочаце замяніць flickrbombAPIkey на радок вашага ўласнага ключа Flickr API. Атрымаць ключ API Flickr бясплатна і проста, проста перайдзіце па гэтай спасылцы: www.flickr.com/services/api/misc.api_keys.html. Атрыбут старонкі - гэта бягучая старонка фотаздымкаў Flickr, на якіх мы знаходзімся.
Тут вялікім метадам з'яўляецца .fetch (), які абстрагуе дэталі выцягвання фатаграфій з API Flickr. Каб пазбегнуць праблем з міждаменнымі запытамі, мы выкарыстоўваем JSONP, які падтрымліваюць і Flickr API, і jQuery. Іншыя параметры, якія мы перадаём API, павінны быць зразумелымі. Асаблівую цікавасць выклікаюць тут функцыі Backbone. У выпадку зваротнага выкліку мы выкарыстоўваем .add (), функцыю, якая прымае масіў атрыбутаў мадэлі, стварае асобнікі мадэлі з гэтых атрыбутаў, а затым дадае іх у калекцыю.
Функцыі .nextPage () і .prevPage () спачатку змяняюць старонку, якую мы хочам адлюстраваць,
выкарыстоўвайце функцыю збору .remove (), каб выдаліць усе існуючыя мадэлі з
калекцыі, а затым патэлефанаваць па выбары, каб атрымаць фатаграфіі для бягучай старонкі (што мы проста
зменены).
FlickrBombImage
Працуючы назад, нам патрэбна яшчэ адна мадэль для прадстаўлення запаўняльніка, які будзе складацца з калекцыі FlickrImages і бягучай абранай FlickrImage. Мы назавем гэтую мадэль FlickrBombImage.
var localStorage = (supports_local_storage ())? новая крама ("flickrBombImages"): null; var FlickrBombImage = Backbone.Model.extend ({localStorage: localStorage, initialize: function () {_.bindAll (this, 'loadFirstImage'); this.flickrImages = new FlickrImages (); 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') === undefined) {this.set ({src: this.flickrImages. спачатку (). image_url ()});}}});
Паколькі гэтая мадэль адказвае за адсочванне абранага ў цяперашні час малюнка паміж загрузкамі старонак, яна павінна ведаць, які мясцовы магазін выкарыстоўваць.Першы радок забяспечыць падтрымку мясцовага захоўвання, а потым створым краму, якую мы будзем выкарыстоўваць для захавання абранага малюнка.
Магістраль дазваляе нам вызначыць функцыю .initialize (), якая будзе выклікана пры стварэнні асобніка мадэлі. Мы выкарыстоўваем гэтую функцыю ў FlickrBombImage, каб стварыць новы экземпляр калекцыі FlickrImages, перадаць ключавыя словы, якія будуць выкарыстоўвацца для гэтага малюнка, а затым атрымаць малюнкі з Flickr.
Функцыя .loadFirstImage () была перададзена ў якасці зваротнага выкліку для запуску, калі выявы былі загружаныя з Flickr. Як вы ўжо маглі здагадацца, гэтая функцыя ўсталёўвае бягучы малюнак першым у калекцыі з Flickr. Гэта не робіць гэтага, калі бягучы малюнак ужо ўсталяваны.
Мы таксама будзем выкарыстоўваць зваротныя выклікі атрыбута Backbone для запуску нашай функцыі .changeSrc () пры змене атрыбута src гэтай мадэлі. Увесь гэты зваротны званок выклікае .save (), функцыю мадэлі Backbone, якая захоўвае атрыбуты мадэлі для любога ўзроўню крамы, які быў рэалізаваны (у нашым выпадку localstore). Такім чынам, пры змене абранага малюнка ён неадкладна захоўваецца.
Пласт прагляду
Цяпер, калі ў нас напісаны ўвесь бэкэнд-код (ну, інтэрфейсны бэкэнд), мы можам скласці Прагляды. Погляды ў Backbone трохі адрозніваюцца ад уяўленняў у іншых традыцыйных рамках MVC. Хоць выгляд звычайна тычыцца толькі прэзентацыі, а Backbone View адказвае і за паводзіны. Гэта азначае, што ваш выгляд не толькі вызначае, як нешта выглядае, але і тое, што ён павінен рабіць пры ўзаемадзеянні.
Выгляд звычайна (але не заўсёды) прывязаны да некаторых дадзеных і праходзіць тры этапы, каб стварыць разметку прэзентацыі з гэтых дадзеных:
1. Аб'ект View ініцыялізуецца, і ствараецца пусты элемент.
2. Выклікаецца функцыя адлюстравання, якая стварае разметку для выгляду, устаўляючы яе ў элемент, створаны на папярэднім этапе.
3. Элемент прымацаваны да DOM.
Гэта можа падацца вялікай працай для стварэння пэўнай разметкі, і мы яшчэ не дайшлі да часткі паводзінаў View, але гэта важна, і вось чаму. Кожны раз, калі вы змяняеце элементы, якія знаходзяцца ў DOM, вы запускаеце нешта, што называецца перапрафіляваннем браўзэра. Аднаўленне - гэта пераразлік браўзэра, як размешчана кожная рэч на старонцы. Перапрацоўка браўзэра можа пагоршыць прадукцыйнасць, калі яна выклікаецца ў выпадку перацягвання альбо змены памеру, якое запускаецца з вельмі кароткім інтэрвалам, але яшчэ горш - яны выглядаюць неакуратна. Пры складанай маніпуляцыі старонкамі вы бачыце, як элементы дадаюцца на старонку, і ажыццяўляецца перастаноўка элементаў. Выконваючы шаблон ініцыялізацыі, рэндэрынгу і ўкладання Backbone, вы гарантуеце аднаразовае перапрафіляванне, і змены на старонцы будуць адчувальныя імгненныя, незалежна ад складанасці маніпуляцый з элементамі.
FlickrBombImageView
var FlickrBombImageView = Backbone.View.extend ({tagName: "div", className: "flickrbombContainer", lock: false, template: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), ініцыялізацыя: function (options) {_.bindAll (this,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var keywords = options. img.attr ('src') .replace ('flickr: //', ''); this. $ el = $ (this.el); this.image = new FlickrBombImage ({keywords: keyword, id: options. img.attr ('id')}); this.image.flickrImages.bind ('add', this.addImage); this.image.bind ('change: src', this.updateSrc);}, падзеі: { "click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos"}, render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); вярнуць гэта;}, ...});
Функцыі гэтага выгляду апушчаны для сцісласці, зыходны код цалкам размешчаны на GitHub: github.com/zurb/flickrbomb
У верхняй частцы прагляду мы маем пару спецыфічных атрыбутаў. tagName і className выкарыстоўваюцца для вызначэння тэга і класа, якія будуць ужытыя да элемента гэтага прадстаўлення. Памятаеце, што першым этапам стварэння View з'яўляецца стварэнне аб'екта, і паколькі гэтым стварэннем займаецца Backbone, нам трэба ўказаць элемент і клас. Звярніце ўвагу, што Backbone мае разумныя па змаўчанні; калі мы апусцім гэтыя атрыбуты, div выкарыстоўваецца па змаўчанні, і ніякі клас не будзе прымяняцца, калі вы не ўкажаце яго.
Атрыбут шаблону з'яўляецца ўмоўнай, але не абавязковай. Мы выкарыстоўваем яго тут, каб паказаць функцыю шаблона JavaScript, якую мы будзем выкарыстоўваць для генерацыі разметкі для гэтага выгляду. Мы выкарыстоўваем функцыю _.template (), уключаную ў Underscore.js, але вы можаце выкарыстоўваць які-небудзь шаблонны механізм, які вам больш падабаецца, мы не будзем судзіць вас.
У нашай функцыі .initialize () мы выцягваем радок ключавых слоў з тэга выявы, а затым ствараем мадэль FlickrBombImage з выкарыстаннем гэтых ключавых слоў. Мы таксама абавязваем функцыю .addImage () запускаць, калі ў калекцыю FlickrImages дадаецца FlickrImage. Гэтая функцыя дадасць нядаўна дададзены FlickrImage да нашай сеткі выбару малюнкаў. Апошні і найбольш важны радок прывязвае функцыю .updateSrc () да запуску пры змене абранага ў цяперашні час FlickrImage. Пры змене бягучага малюнка ў мадэлі гэтая функцыя будзе працаваць, абнавіць атрыбут src элемента малюнка, а CSS зменіць памер і абрэжа малюнак у адпаведнасці з памерамі выявы, зададзенымі карыстальнікам.
падзеі: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos "}
Пасля .initialize () мы маем частку паводзін View. Магістраль забяспечвае зручны спосаб прывязкі падзей з дапамогай аб'екта падзей. Аб'ект падзей выкарыстоўвае метад jQuery .delegate () для фактычнага прывязкі да элемента View, так што, незалежна ад таго, якую маніпуляцыю вы робіце з элементам у выглядзе, усе звязаныя падзеі па-ранейшаму будуць працаваць. Ён працуе гэтак жа, як jQuery .live (), за выключэннем таго, што замест прывязкі падзей да ўсяго дакумента вы можаце звязаць іх у межах любога элемента. Ключ кожнага запісу ў аб'екце падзей складаецца з падзеі і селектара, значэнне паказвае на функцыю, якая павінна быць прывязана да гэтай падзеі. Звярніце ўвагу, што .delegate () не працуе з некаторымі падзеямі, такімі як submit, гл. Дакументацыю jQuery .live (), каб атрымаць поўны спіс падтрымоўваных падзей.
render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); вярнуць гэта;}
Нарэшце, у нас ёсць функцыя .render (), якая адказвае за стварэнне разметкі і выкананне любой дадатковай працы, якую нельга выканаць, пакуль разметка View не будзе дададзена да элемента View. Пасля таго, як мы зрабілі наш шаблон, нам трэба выклікаць .fetch () на нашым FlickrBombImage. .fetch () - гэта функцыя Backbone, якая атрымлівае апошнюю копію мадэлі з пласта захавання. Калі б мы захавалі гэтую мадэль раней, .fetch () атрымаў бы гэтыя дадзеныя зараз. Пасля таго, як выява была атрымана, нам трэба выклікаць resize, каб правільна размясціць яе.
Дом Stretch
З усімі кавалкамі на месцы нам усё, што нам зараз трэба зрабіць, гэта знайсці выявы-запаўняльнікі на старонцы і замяніць іх візуалізаванымі праглядамі FlickrBombImage.
$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = new FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView. render (). el);});
Гэты маленькі фрагмент трэба запусціць у ніжняй частцы старонкі альбо ў зваротным выкліку, гатовым да дакумента, каб ён мог знайсці выявы-запаўняльнікі, якія ён заменіць. Мы выкарыстоўваем згоду ўказання flickr: // [KEYWORD] у атрыбуце src тэга выявы, каб паказаць, што ён павінен быць запоўнены выявамі з Flickr. Мы знаходзім элементы малюнка з адпаведным атрыбутам src, ствараем новы FlickrBombImageView, а потым замяняем малюнак на наш. Мы бярэм копію зыходнага малюнка і перадаем яго ў наш FlickrBombView, каб мы змаглі атрымаць некаторыя дадатковыя параметры канфігурацыі, якія могуць быць указаны на элеменце.
Канчатковым вынікам усёй гэтай напружанай працы з'яўляецца вельмі просты API для людзей, якія карыстаюцца бібліятэкай. Яны могуць проста вызначыць тэгі малюнкаў, выкарыстоўваючы канвенцыю flickr: //, апусціць код FlickrBomb унізе сваёй старонкі і, бам, яны атрымалі запаўняльнікі з Flickr.
Выдатна працуе з вялікімі вэб-праграмамі
У нас ёсць вялікае вэб-дадатак пад назвай Notable, якое было напісана без асцярогі для стварэння змесціва на баку кліента. Калі мы хацелі зрабіць раздзелы з турбазарадкай прыкладання генеруючы змест кліента, мы абралі Backbone. Прычыны былі аднолькавыя: мы хацелі, каб лёгкі фреймворк дапамог арганізаваць код, але не прымусіў нас перагледзець увесь дадатак.
Мы пачалі змены ў пачатку гэтага года з вялікім поспехам і з таго часу спяваем Backbones.
Дадатковыя рэсурсы
У Backbone ёсць нашмат больш, чым тое, пра што я распавёў у гэтым артыкуле, частка C (кантролер) MVC (кантролер прагляду мадэляў) для пачаткоўцаў, якая на самай справе з'яўляецца R (маршрутызатарам) у апошняй версіі. І ўсё гэта асвятляецца ў дакументацыі "Backbone", лёгкай раніцай у суботу:
documentcloud.github.com/backbone/
Калі вам патрэбныя больш традыцыйныя падручнікі, азнаёмцеся з вельмі добра дакументаваным кодам гэтага прыкладання Todo, напісаным на Backbone:
documentcloud.github.com/backbone/docs/todos.html
