Knockout.JS на примере 2ГИС-Онлайн
Upcoming SlideShare
Loading in...5
×
 

Knockout.JS на примере 2ГИС-Онлайн

on

  • 1,363 views

 

Statistics

Views

Total Views
1,363
Views on SlideShare
1,288
Embed Views
75

Actions

Likes
0
Downloads
4
Comments
0

4 Embeds 75

http://devday.2gis.ru 48
http://devday.ru 23
http://devday.local 2
http://10.54.86.138 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Knockout.JS на примере 2ГИС-Онлайн Knockout.JS на примере 2ГИС-Онлайн Presentation Transcript

  • САЛЬНИКОВ СТАНИСЛАВKNOCKOUT.js НА ПРИМЕРЕ2ГИС-ОНЛАЙН
  • АРХИТЕКТУРА WEB-APP Пользователь 2ГИС Онлайн API СправочникаWWW.2GIS.RU
  • АРХИТЕКТУРА CLIENT-SIDE APP Пользователь 2ГИС Онлайн API API API API APIТранспорта пробок <Место для вашего сервиса> Справочник Карт +1 WWW.2GIS.RU
  • DOM НА КЛИЕНТЕWWW.2GIS.RU
  • DOM НА КЛИЕНТЕ var newDiv = document.createElement(div); newDiv.className = my-class; newDiv.id = my-id; newDiv.innerHTML = Привет, мир!; document.body.appendChild(newDiv); Привет, мир!WWW.2GIS.RU
  • WHERE IS
  • ШАБЛОНИЗАТОРЫ jQueryTemplate Mustache Underscore.js Шаблонизатор резига PureWWW.2GIS.RU
  • СОБЫТИЯ .firmShort .firmFull #firmListWWW.2GIS.RU
  • СОБЫТИЯ$("#firmTemplate").tmpl(someData).appendTo("#firmList");$(.firmShort).live({ click: function() { showFirmCard(this); } });$(.firmFull).live({ click: function() { hideFirmCard(this); } });WWW.2GIS.RU
  • СОБЫТИЯWWW.2GIS.RU
  • KNOCKOUTWWW.2GIS.RU
  • ПОЧЕМУ KNOCKOUT? Активно развиваетсяWWW.2GIS.RU
  • ПОЧЕМУ KNOCKOUT?● Активно развивается Удобное разделение логики и шаблоновWWW.2GIS.RU
  • ПОЧЕМУ KNOCKOUT?● Активно развивается● Удобное разделение логики и шаблонов Функционален, есть декларативные биндингиWWW.2GIS.RU
  • ПОЧЕМУ KNOCKOUT?● Активно развивается● Удобное разделение логики и шаблонов● Функционален, есть декларативные биндинги Низкий порог вхожденияWWW.2GIS.RU
  • MVVM UI Logic Business Logic View Model ViewModel Application LogicWWW.2GIS.RU
  • MVVM Данные ViewModel Вспомогательные функции Связывание данных KO с отображениемWWW.2GIS.RU
  • KNOCKOUTWWW.2GIS.RU
  • KNOCKOUT <div> <span data-bind="text: what"></span>, <span data-bind="text: where"></span> </div>WWW.2GIS.RU
  • KO.OBSERVABLEfunction vm() { this.what = ko.observable();} WWW.2GIS.RU
  • KO.OBSERVABLEfunction vm() { this.what = ko.observable();}ko.applyBindings(new vm()); WWW.2GIS.RU
  • KO.OBSERVABLEfunction vm() { this.what = ko.observable();}ko.applyBindings(new vm());vm.what(response.what);<span data-bind="text: what"></span> WWW.2GIS.RU
  • МАССИВЫWWW.2GIS.RU
  • МАССИВЫresponse.result = [ { firmName = Завод №1, ... }, { firmName = Завод №2; ... }] WWW.2GIS.RU
  • KO.OBSERVABLE_ARRAYfunction vm () { this.firms = ko.observableArray([]);}...vm.firms(response.result);<div data-bind="foreach: firms"> <div data-bind="text: firmName"></div></div> WWW.2GIS.RU
  • BINDINGSWWW.2GIS.RU
  • BINDINGS <div> <span data-bind="text: what"></span>, <span data-bind="text: where"></span> </div>WWW.2GIS.RU
  • BINDINGS- Текст и стиль блока- Control flow- Работа с формами- Шаблонизация- События- <место для ваших идей>WWW.2GIS.RU
  • BINDINGS .firmShort .firmFull #firmListWWW.2GIS.RU
  • BINDINGS<div id="firmList" data-bind="foreach: firms"> <div class="firmShort" data-bind="visible: !isVisible"></div> <div class="firmFull" data-bind="visible: isVisible"></div></div> WWW.2GIS.RU
  • BINDINGSWWW.2GIS.RU
  • BINDINGSdata-bind="visible: isVisible, click: toggleVisibility" WWW.2GIS.RU
  • BINDINGSdata-bind="visible: isVisible, click: toggleVisibility"toggleVisibility = function() { this.isVisible(!this.isVisible());} WWW.2GIS.RU
  • BINDINGSko.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"; }};WWW.2GIS.RU
  • BINDINGSko.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); }};WWW.2GIS.RU
  • BINDINGSdata-bind="animateVisible: isVisible, click: toggleVisibility"toggleVisibility = function() { this.isVisible(!this.isVisible());} WWW.2GIS.RU
  • BINDINGS<script type="text/my-tpl" id="firm-tpl"> // Put yor awesome template here!</script>WWW.2GIS.RU
  • BINDINGS<script type="text/my-tpl" id="catalog-tpl"> <div data-bind="template: { name: firm-tpl, foreach: firms }"></div></script>WWW.2GIS.RU
  • BINDING-CONTEXT vm vm.firms[n]WWW.2GIS.RU
  • BINDING-CONTEXT context === $dataWWW.2GIS.RU
  • BINDING-CONTEXT context === $data $data === $context.$dataWWW.2GIS.RU
  • BINDINGS <div class="contacts" data-bind="template: { name: firm-tpl, data: $data }"> <!-- Some code--> </div>WWW.2GIS.RU
  • BINDING CONTEXT ● $data ● $parent $context ● $parentContext ● $root ● $index $elementWWW.2GIS.RU
  • BINDINGSfunction initBalloon (options) { map.createBalloon({ point: options.point; content: options.template });}WWW.2GIS.RU
  • BINDINGSfunction initBalloon (options) { map.createBalloon({ point: options.point; content: options.template }); var container = $(#balloonContent); ko.applyBindingsToNode(container , vm);}WWW.2GIS.RU
  • КОГДА МНОГО "ЕСЛИ"WWW.2GIS.RU
  • КОГДА МНОГО "ЕСЛИ"this.hidePreloader = ko.computed(function(){ return this.firmsLoad() && this.geoLoad();});<span id="preloader" data-bind="visible: !hidePreloader"></span>WWW.2GIS.RU
  • KO.COMPUTED Не наблюдайте один computed внутри другогоWWW.2GIS.RU
  • KO.COMPUTED1. Не наблюдайте один computed внутри другого Не меняйте observable внутри computedWWW.2GIS.RU
  • KO.COMPUTED1. Не наблюдайте один computed внутри другого2. Не меняйте observable внутри computed Используйте computed только там, где это необходимоWWW.2GIS.RU
  • PLUGINSWWW.2GIS.RU
  • PLUGINS knockout.addressWWW.2GIS.RU
  • PLUGINSWWW.2GIS.RU
  • PLUGINS window.location vm.myObservableWWW.2GIS.RU
  • PLUGINS window.location vm.myObservableko.linkObservableToUrl(vm.history, history);WWW.2GIS.RU
  • PLUGINS https://github.com/SteveSanderson/knockout/wiki/PluginsWWW.2GIS.RU
  • БОЛЬШИЕ ПРОЕКТЫ 107 22 18 Computed Observable Observable ArrayWWW.2GIS.RU
  • БОЛЬШИЕ ПРОЕКТЫ200+ 107 22 18FunctionsWWW.2GIS.RU
  • БОЛЬШИЕ ПРОЕКТЫ 13 200+ 107 22 18WWW.2GIS.RU
  • БОЛЬШИЕ ПРОЕКТЫNamespace.ViewModelModules.ourModule = { _observables: { ourObservable: "", ourObservableArray: [], ourComputed: function(){} }, _initModule: function(){/*initCode*/}, someProperty: 100500, someFunction: function(){/*fBody*/}} WWW.2GIS.RU
  • БОЛЬШИЕ ПРОЕКТЫNamespace.ViewModelModules.ourModule = { _observables: { ourObservable: "", ourObservableArray: [], ourComputed: function(){} }, 150 _initModule: function(){/*initCode*/}, someProperty: 100500, someFunction: function(){/*fBody*/}} WWW.2GIS.RU WWW.2GIS.RU
  • IDEdata-bind=" //очень много //кода //который выглядит //как одна сплошная строка"WWW.2GIS.RU
  • IDEWWW.2GIS.RU
  • IDEWWW.2GIS.RUWWW.2GIS.RU
  • АНАЛОГИ - AngularJS - Backbone.js - Ember.js - ExtJS - CorMVC - AsanaLuna - ...WWW.2GIS.RU
  • ВОПРОСЫ?WWW.2GIS.RU