Your SlideShare is downloading. ×
0
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

DUMP-2013 Frontend - Knockoutjs на примере 2ГИС-Онлайн - Таратухин Илья

1,182

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,182
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Пользователь2ГИС ОнлайнAPI СправочникаАРХИТЕКТУРА WEB-APPWWW.2GIS.RU
  • 2. АРХИТЕКТУРА CLIENT-SIDE APPПользователь2ГИС ОнлайнAPIТранспортаAPIпробокAPI<Место длявашего сервиса>APIСправочникAPIКарт +1WWW.2GIS.RU
  • 3. DOM НА КЛИЕНТЕWWW.2GIS.RU
  • 4. DOM НА КЛИЕНТЕvar newDiv = document.createElement(div);newDiv.className = my-class;newDiv.id = my-id;newDiv.innerHTML = Привет, мир!;$(#container).appendChild(newDiv);Привет, мир!WWW.2GIS.RU
  • 5. WHERE IS
  • 6. ШАБЛОНИЗАТОРЫjQueryTemplateMustacheUnderscore.jsШаблонизатор резигаPureWWW.2GIS.RUWWW.2GIS.RU
  • 7. СОБЫТИЯ.firmShort.firmFull#firmListWWW.2GIS.RUWWW.2GIS.RU
  • 8. СОБЫТИЯ$("#firmTemplate").tmpl(someData).appendTo("#firmList");$(.firmShort).live({click: function() {showFirmCard(this);}});$(.firmFull).live({click: function() {hideFirmCard(this);}});WWW.2GIS.RUWWW.2GIS.RU
  • 9. СОБЫТИЯ
  • 10. ПОЧЕМУ KNOCKOUT?Активно развиваетсяWWW.2GIS.RUWWW.2GIS.RU
  • 11. ● Активно развиваетсяПОЧЕМУ KNOCKOUT?Удобное разделениелогики и шаблоновWWW.2GIS.RUWWW.2GIS.RU
  • 12. ● Активно развивается● Удобное разделение логики и шаблоновПОЧЕМУ KNOCKOUT?Функционален, естьдекларативные биндингиWWW.2GIS.RUWWW.2GIS.RU
  • 13. ● Активно развивается● Удобное разделение логики и шаблонов● Функционален, есть декларативныебиндингиПОЧЕМУ KNOCKOUT?Низкий порог вхожденияWWW.2GIS.RUWWW.2GIS.RU
  • 14. MVVMView ModelViewModelUI Logic Business LogicApplication LogicWWW.2GIS.RUWWW.2GIS.RU
  • 15. KNOCKOUTWWW.2GIS.RUWWW.2GIS.RU
  • 16. <div class="dg-search-result-header"><span data-bind="text: what_text"></span>,<span data-bind="text: where_text"></span></div>KNOCKOUTWWW.2GIS.RUWWW.2GIS.RU
  • 17. function vm() {this.what_text = ko.observable();}ko.applyBindings(new vm());...vm.what_text(response.what);<span data-bind="text: what_text"></span>KO.OBSERVABLEWWW.2GIS.RUWWW.2GIS.RU
  • 18. МАССИВЫWWW.2GIS.RUWWW.2GIS.RU
  • 19. response.result = [{firmName = Театр №1,...},{firmName = Театр №2;...}]МАССИВЫWWW.2GIS.RUWWW.2GIS.RU
  • 20. function vm () {this.firms = ko.observableArray([]);}...vm.firms(response.result);<div data-bind="foreach: firms"><div data-bind="text: firmName"></div></div>KO.OBSERVABLE_ARRAYWWW.2GIS.RUWWW.2GIS.RU
  • 21. BINDINGS
  • 22. <div class="dg-search-result-header"><span data-bind="text: what_text"></span>,<span data-bind="text: where_text"></span></div>BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  • 23. BINDINGS— Текст и стиль блока— Control flow— Работа с формами— Шаблонизация— <место для ваших идей>WWW.2GIS.RUWWW.2GIS.RU
  • 24. .firmShort.firmFull#firmListWWW.2GIS.RUWWW.2GIS.RUBINDINGS
  • 25. <div id="firmList"data-bind="foreach: firms"><div class="firmShort"data-bind="visible: !isVisible"></div><div class="firmFull"data-bind="visible: isVisible"></div></div>BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  • 26. data-bind="visible: isVisible,click: toggleVisibility"BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  • 27. data-bind="visible: isVisible,click: toggleVisibility"toggleVisibility = function() {this.isVisible(!this.isVisible());}BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  • 28. ko.bindingHandlers[visible] = {update: function (element, valueAccessor) {var value = ko.utils.unwrapObservable(valueAccessor());var isCurrentlyVisible = !(element.style.display== "none");if (value && !isCurrentlyVisible)element.style.display = "";else if ((!value) && isCurrentlyVisible)element.style.display = "none";}};BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  • 29. ko.bindingHandlers[animateVisible] = {update: function (element, valueAccessor) {var value = ko.utils.unwrapObservable(valueAccessor());var isCurrentlyVisible = !(element.style.display== "none");var slideSpeed = 200;if (value && !isCurrentlyVisible)$(element).slideDown(slideSpeed,callback);else if ((!value) && isCurrentlyVisible)$(element).slideUp(slideSpeed,callback);}};BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  • 30. data-bind="animateVisible: isVisible,click: toggleVisibility"toggleVisibility = function() {this.isVisible(!this.isVisible());}BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  • 31. <script type="text/my-tpl" id="firm-tpl">//firm template code</script>BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  • 32. <script type="text/my-tpl" id="catalog-tpl">//some template code<div data-bind="template: {name: firm-tpl,foreach: firms}"></div></script>BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  • 33. BINDINGS
  • 34. BINDING-CONTEXTvmvm.firms[n]WWW.2GIS.RUWWW.2GIS.RU
  • 35. ПЕЧАТЬWWW.2GIS.RUWWW.2GIS.RU
  • 36. <script type="text/my-tpl" id="print-tpl">//some template code<div data-bind="template: {name: firm-tpl,foreach: firms,templateOptions: {isPrint: 1}}"></div></script>ПЕЧАТЬWWW.2GIS.RUWWW.2GIS.RU
  • 37. BINDINGS<div class="phone-number"data-bind="visible: $context.isPrint)"><!-- Some code--></div>WWW.2GIS.RUWWW.2GIS.RU
  • 38. BINDINGS<div class="contacts"data-bind="template: {name: firm-tpl,data: $data,templateOptions: {isPrint: $context.isPrint}}"><!-- Some code--></div>WWW.2GIS.RUWWW.2GIS.RU
  • 39. $context$datatemplateOptionsBINDING CONTEXTWWW.2GIS.RUWWW.2GIS.RU
  • 40. BINDING CONTEXT● $parent● $parentContext● $root● $index● $elementWWW.2GIS.RUWWW.2GIS.RU$context$datatemplateOptions
  • 41. function initBalloon (options) {map.createBalloon({point: options.point;content: options.template});}BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  • 42. function initBalloon (options) {map.createBalloon({point: options.point;content: options.template});var container = $(#balloonContent);ko.applyBindingsToNode(container , vm);}BINDINGSWWW.2GIS.RUWWW.2GIS.RU
  • 43. КОГДА МНОГО "ЕСЛИ"WWW.2GIS.RUWWW.2GIS.RU
  • 44. this.showPreloader = ko.computed(function(){return this.firmsLoad() && this.geoLoad();});<span id="preloader"data-bind="visible: showPreloader"></span>КОГДА МНОГО "ЕСЛИ"WWW.2GIS.RUWWW.2GIS.RU
  • 45. Не наблюдайте один computedвнутри другогоKO.COMPUTEDWWW.2GIS.RUWWW.2GIS.RU
  • 46. WWW.2GIS.RU
  • 47. 1. Не наблюдайте один computed внутри другогоKO.COMPUTEDНе меняйте observable внутриcomputedWWW.2GIS.RUWWW.2GIS.RUWWW.2GIS.RU
  • 48. 1. Не наблюдайте один computed внутри другого2. Не меняйте observable внутри computedKO.COMPUTEDИспользуйте computed только там,где это необходимоWWW.2GIS.RUWWW.2GIS.RU
  • 49. PLUGINS
  • 50. PLUGINSknockout.addressWWW.2GIS.RUWWW.2GIS.RU
  • 51. PLUGINSwindow.location vm.myObservableko.linkObservableToUrl(vm.history, history);WWW.2GIS.RUWWW.2GIS.RUknockout.address
  • 52. PLUGINSWWW.2GIS.RUWWW.2GIS.RU$(#firmFull).dataBind({animateVisible: isVisible,click: toggleVisibility});
  • 53. https://gist.github.com/joelnet/1006808PLUGINSWWW.2GIS.RUWWW.2GIS.RUUnobtrusive Knockoutsupport library for jQueryJoel Thoms
  • 54. https://github.com/SteveSanderson/knockout/wiki/PluginsPLUGINSWWW.2GIS.RUWWW.2GIS.RU
  • 55. БОЛЬШИЕ ПРОЕКТЫ107 22 18Observable Computed ObservableArrayWWW.2GIS.RUWWW.2GIS.RU
  • 56. FunctionsБОЛЬШИЕ ПРОЕКТЫ200+ 107 22 18WWW.2GIS.RUWWW.2GIS.RU
  • 57. БОЛЬШИЕ ПРОЕКТЫ18WWW.2GIS.RUWWW.2GIS.RU107200+13 22
  • 58. Namespace.ViewModelModules.<ourModule> = {_observables: {<ourObservable>: <defaultData>,<ourComputed>: function(){/*computedCode*/}},<someProperty>: 100500,_initModule: function(){/*initCode*/},<function>: function(){/*fBody*/}}БОЛЬШИЕ ПРОЕКТЫWWW.2GIS.RUWWW.2GIS.RU
  • 59. Namespace.ViewModelModules.<ourModule> = {_observables: {<ourObservable>: <defaultData>,<ourComputed>: function(){/*computedCode*/}},<someProperty>: 100500,_initModule: function(){/*initCode*/},<function>: function(){/*fBody*/}}WWW.2GIS.RUБОЛЬШИЕ ПРОЕКТЫ150WWW.2GIS.RUWWW.2GIS.RU
  • 60. https://github.com/2gis/dgKoModulizerdgKoModulizerWWW.2GIS.RUWWW.2GIS.RU
  • 61. IDEdata-bind="//очень много//кода//который выглядит//как одна сплошная строка"WWW.2GIS.RUWWW.2GIS.RU
  • 62. IDEWWW.2GIS.RUWWW.2GIS.RU
  • 63. IDEWWW.2GIS.RUWWW.2GIS.RU
  • 64. ПРОИЗВОДИТЕЛЬНОСТЬWWW.2GIS.RUWWW.2GIS.RUDOM.Build()
  • 65. АНАЛОГИ— AngularJS— Backbone.js— Ember.js— ExtJS— CorMVC— AsanaLuna— ...WWW.2GIS.RUWWW.2GIS.RU
  • 66. Илья Таратухин@darklifa

×