KnockoutJS на примере 2ГИС-Онлайн

878 views

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
878
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

KnockoutJS на примере 2ГИС-Онлайн

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

×