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

Embed Size (px)

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

  • 1.dump 2013

2. 2 API WEB-APPWWW.2GIS.RU 3. CLIENT-SIDE APP2 APIAPIAPI< >APIAPI +1WWW.2GIS.RU 4. DOM WWW.2GIS.RU 5. DOM var newDiv = document.createElement(div);newDiv.className = my-class;newDiv.id = my-id;newDiv.innerHTML = , !;$(#container).appendChild(newDiv);, !WWW.2GIS.RU 6. WHERE IS 7. jQueryTemplateMustacheUnderscore.js PureWWW.2GIS.RUWWW.2GIS.RU 8. .firmFullWWW.2GIS.RUWWW.2GIS.RU.firmShort#firmList 9. $("#firmTemplate").tmpl(someData).appendTo("#firmList");$(.firmShort).live({click: function() {showFirmCard(this);}});$(.firmFull).live({click: function() {hideFirmCard(this);}});WWW.2GIS.RUWWW.2GIS.RU 10. 11. KNOCKOUT? WWW.2GIS.RUWWW.2GIS.RU 12. KNOCKOUT? WWW.2GIS.RUWWW.2GIS.RU 13. KNOCKOUT?, WWW.2GIS.RUWWW.2GIS.RU 14. , KNOCKOUT? WWW.2GIS.RUWWW.2GIS.RU 15. MVVMView ModelViewModelUI Logic Business LogicApplication LogicWWW.2GIS.RUWWW.2GIS.RU 16. KNOCKOUTWWW.2GIS.RUWWW.2GIS.RU 17.

,

KNOCKOUTWWW.2GIS.RUWWW.2GIS.RU 18. function vm() {this.what_text = ko.observable();}ko.applyBindings(new vm());...vm.what_text(response.what);KO.OBSERVABLEWWW.2GIS.RUWWW.2GIS.RU 19. WWW.2GIS.RUWWW.2GIS.RU 20. response.result = [{firmName = 1,...},{firmName = 2;...}]WWW.2GIS.RUWWW.2GIS.RU 21. function vm () {this.firms = ko.observableArray([]);}...vm.firms(response.result);

KO.OBSERVABLE_ARRAYWWW.2GIS.RUWWW.2GIS.RU 22. BINDINGS 23.

,

BINDINGSWWW.2GIS.RUWWW.2GIS.RU 24. BINDINGS Control flow < >WWW.2GIS.RUWWW.2GIS.RU 25. .firmFullWWW.2GIS.RUWWW.2GIS.RU.firmShort#firmListBINDINGS 26.

BINDINGSWWW.2GIS.RUWWW.2GIS.RU 27. data-bind="visible: isVisible,click: toggleVisibility"BINDINGSWWW.2GIS.RUWWW.2GIS.RU 28. data-bind="visible: isVisible,click: toggleVisibility"toggleVisibility = function() {this.isVisible(!this.isVisible());}BINDINGSWWW.2GIS.RUWWW.2GIS.RU 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. 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. data-bind="animateVisible: isVisible,click: toggleVisibility"toggleVisibility = function() {this.isVisible(!this.isVisible());}BINDINGSWWW.2GIS.RUWWW.2GIS.RU 32. BINDINGSWWW.2GIS.RUWWW.2GIS.RU 33. BINDINGSWWW.2GIS.RUWWW.2GIS.RU 34. BINDINGS 35. BINDING-CONTEXTvmvm.firms[n]WWW.2GIS.RUWWW.2GIS.RU 36. WWW.2GIS.RUWWW.2GIS.RU 37. WWW.2GIS.RUWWW.2GIS.RU 38. BINDINGS

WWW.2GIS.RUWWW.2GIS.RU 39. BINDINGS

WWW.2GIS.RUWWW.2GIS.RU 40. $context$datatemplateOptionsBINDING CONTEXTWWW.2GIS.RUWWW.2GIS.RU 41. BINDING CONTEXT $parent $parentContext $root $index $elementWWW.2GIS.RUWWW.2GIS.RU$context$datatemplateOptions 42. function initBalloon (options) {map.createBalloon({point: options.point;content: options.template});}BINDINGSWWW.2GIS.RUWWW.2GIS.RU 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. ""WWW.2GIS.RUWWW.2GIS.RU 45. this.showPreloader = ko.computed(function(){return this.firmsLoad() && this.geoLoad();}); ""WWW.2GIS.RUWWW.2GIS.RU 46. computed KO.COMPUTEDWWW.2GIS.RUWWW.2GIS.RU 47. WWW.2GIS.RU 48. 1. computed KO.COMPUTED observable computedWWW.2GIS.RUWWW.2GIS.RUWWW.2GIS.RU 49. WWW.2GIS.RU 50. 1. computed 2. observable computedKO.COMPUTED computed , WWW.2GIS.RUWWW.2GIS.RU 51. PLUGINS 52. PLUGINSknockout.addressWWW.2GIS.RUWWW.2GIS.RU 53. PLUGINSwindow.location vm.myObservableko.linkObservableToUrl(vm.history, history);WWW.2GIS.RUWWW.2GIS.RUknockout.address 54. PLUGINSWWW.2GIS.RUWWW.2GIS.RU$(#firmFull).dataBind({animateVisible: isVisible,click: toggleVisibility}); 55. https://gist.github.com/joelnet/1006808PLUGINSWWW.2GIS.RUWWW.2GIS.RUUnobtrusive Knockoutsupport library for jQueryJoel Thoms 56. https://github.com/SteveSanderson/knockout/wiki/PluginsPLUGINSWWW.2GIS.RUWWW.2GIS.RU 57. 107 22 18Observable Computed ObservableArrayWWW.2GIS.RUWWW.2GIS.RU 58. Functions 200+ 107 22 18WWW.2GIS.RUWWW.2GIS.RU 59. 18WWW.2GIS.RUWWW.2GIS.RU107200+13 22 60. Namespace.ViewModelModules. = {_observables: {: ,: function(){/*computedCode*/}},: 100500,_initModule: function(){/*initCode*/},: function(){/*fBody*/}} WWW.2GIS.RUWWW.2GIS.RU 61. Namespace.ViewModelModules. = {_observables: {: ,: function(){/*computedCode*/}},: 100500,_initModule: function(){/*initCode*/},: function(){/*fBody*/}}WWW.2GIS.RU 150WWW.2GIS.RUWWW.2GIS.RU 62. https://github.com/2gis/dgKoModulizerdgKoModulizerWWW.2GIS.RUWWW.2GIS.RU 63. IDEdata-bind="// //// // "WWW.2GIS.RUWWW.2GIS.RU 64. IDEWWW.2GIS.RUWWW.2GIS.RU 65. IDEWWW.2GIS.RUWWW.2GIS.RU 66. WWW.2GIS.RUWWW.2GIS.RUDOM.Build() 67. AngularJS Backbone.js Ember.js ExtJS CorMVC AsanaLuna ...WWW.2GIS.RUWWW.2GIS.RU 68. @darklifa