87

Click here to load reader

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

  • Upload
    2-

  • View
    614

  • Download
    2

Embed Size (px)

Citation preview

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

С 2011 года работаю в 2ГИС:

- API Справочника > 5млн- API Карт > 8млн- Карты 2ГИС > 3млнСпикер

dump 2013

Page 3: KnockoutJS на примере 2ГИС-Онлайн
Page 4: KnockoutJS на примере 2ГИС-Онлайн
Page 5: KnockoutJS на примере 2ГИС-Онлайн
Page 6: KnockoutJS на примере 2ГИС-Онлайн
Page 7: KnockoutJS на примере 2ГИС-Онлайн
Page 8: KnockoutJS на примере 2ГИС-Онлайн

Пользователь

2ГИС Онлайн

API Справочника

АРХИТЕКТУРА WEB-APP

WWW.2GIS.RU

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

АРХИТЕКТУРА CLIENT-SIDE APP

Пользователь

2ГИС Онлайн

API Транспорта

API пробок

API <Место для

вашего сервиса>

API Справочник

API Карт +1

WWW.2GIS.RU

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

DOM НА КЛИЕНТЕ

WWW.2GIS.RU

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

DOM НА КЛИЕНТЕ

var newDiv = document.createElement('div'); newDiv.className = 'my-class'; newDiv.id = 'my-id';

newDiv.innerHTML = 'Привет, мир!';

$('#container').appendChild(newDiv);

Привет, мир!

WWW.2GIS.RU

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

WHERE IS

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

ШАБЛОНИЗАТОРЫ

jQueryTemplate

Mustache

Underscore.js

Шаблонизатор резига

Pure

WWW.2GIS.RUWWW.2GIS.RU

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

СОБЫТИЯ

.firmFull

WWW.2GIS.RUWWW.2GIS.RU

.firmShort

#firmList

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

СОБЫТИЯ

$("#firmTemplate").tmpl(someData).appendTo("#firmList");

$('.firmShort').live({ click: function() { showFirmCard(this); } });

$('.firmFull').live({ click: function() { hideFirmCard(this); } });WWW.2GIS.RUWWW.2GIS.RU

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

СОБЫТИЯ

Page 17: KnockoutJS на примере 2ГИС-Онлайн
Page 18: KnockoutJS на примере 2ГИС-Онлайн
Page 19: KnockoutJS на примере 2ГИС-Онлайн

ПОЧЕМУ KNOCKOUT?

Активно развивается

WWW.2GIS.RUWWW.2GIS.RU

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

● Активно развивается

ПОЧЕМУ KNOCKOUT?

Удобное разделение логики и шаблонов

WWW.2GIS.RUWWW.2GIS.RU

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

● Активно развивается● Удобное разделение логики и шаблонов

ПОЧЕМУ KNOCKOUT?

Функционален, есть декларативные биндинги

WWW.2GIS.RUWWW.2GIS.RU

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

● Активно развивается● Удобное разделение логики и шаблонов● Функционален, есть декларативные

биндинги

ПОЧЕМУ KNOCKOUT?

Низкий порог вхождения

WWW.2GIS.RUWWW.2GIS.RU

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

MVVM

View Model

ViewModel

UI Logic Business Logic

Application Logic

WWW.2GIS.RUWWW.2GIS.RU

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

KNOCKOUT

WWW.2GIS.RUWWW.2GIS.RU

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

<div class="dg-search-result-header"> <span data-bind="text: what_text"></span>, <span data-bind="text: where_text"></span></div>

KNOCKOUT

WWW.2GIS.RUWWW.2GIS.RU

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

function vm() {this.what_text = ko.observable('');

}ko.applyBindings(new vm());...vm.what_text(response.what);

<span data-bind="text: what_text"></span>

KO.OBSERVABLE

WWW.2GIS.RUWWW.2GIS.RU

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

МАССИВЫ

WWW.2GIS.RUWWW.2GIS.RU

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

response.result = [ { firmName = 'Музей №1', ... }, { firmName = 'Музей №2'; ... }]

МАССИВЫ

WWW.2GIS.RUWWW.2GIS.RU

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

function vm () {this.firms = ko.observableArray([]);

}...vm.firms(response.result);

<div data-bind="foreach: firms"><div data-bind="text: firmName"></div>

</div>

KO.OBSERVABLE_ARRAY

WWW.2GIS.RUWWW.2GIS.RU

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

BINDINGS

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

<div class="dg-search-result-header"> <span data-bind="text: what_text"></span>, <span data-bind="text: where_text"></span></div>

BINDINGS

WWW.2GIS.RUWWW.2GIS.RU

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

BINDINGS

— Текст и стиль блока

— Control flow

— Работа с формами

— Шаблонизация

— <место для ваших идей>

WWW.2GIS.RUWWW.2GIS.RU

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

.firmFull

WWW.2GIS.RUWWW.2GIS.RU

.firmShort

#firmList

BINDINGS

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

<div id="firmList" data-bind="foreach: firms"><div class="firmShort"

data-bind="visible: !isVisible"></div><div class="firmFull"

data-bind="visible: isVisible"></div></div>

BINDINGS

WWW.2GIS.RUWWW.2GIS.RU

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

data-bind="visible: isVisible,click: toggleVisibility"

BINDINGS

WWW.2GIS.RUWWW.2GIS.RU

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

data-bind="visible: isVisible,click: toggleVisibility"

toggleVisibility = function() { this.isVisible(!this.isVisible());}

BINDINGS

WWW.2GIS.RUWWW.2GIS.RU

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

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"; }};

BINDINGS

WWW.2GIS.RUWWW.2GIS.RU

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

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); }};

BINDINGS

WWW.2GIS.RUWWW.2GIS.RU

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

data-bind="animateVisible: isVisible,click: toggleVisibility"

toggleVisibility = function() { this.isVisible(!this.isVisible());}

BINDINGS

WWW.2GIS.RUWWW.2GIS.RU

Page 43: KnockoutJS на примере 2ГИС-Онлайн
Page 44: KnockoutJS на примере 2ГИС-Онлайн
Page 45: KnockoutJS на примере 2ГИС-Онлайн

<script type="text/my-tpl" id="firm-tpl"> //firm template code</script>

BINDINGS

WWW.2GIS.RUWWW.2GIS.RU

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

<script type="text/my-tpl" id="catalog-tpl"> //some template code <div data-bind="template: { name: 'firm-tpl', foreach: firms }"></div></script>

BINDINGS

WWW.2GIS.RUWWW.2GIS.RU

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

BINDINGS

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

BINDING-CONTEXT

vm

vm.firms[n]

WWW.2GIS.RUWWW.2GIS.RU

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

ПЕЧАТЬ

WWW.2GIS.RUWWW.2GIS.RU

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

<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

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

BINDINGS

<div class="phone-number" data-bind="visible: $context.isPrint)"> <!-- Some code--></div>

WWW.2GIS.RUWWW.2GIS.RU

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

BINDINGS

<div class="contacts" data-bind="template: { name: 'firm-tpl', data: $data, templateOptions: { isPrint: $context.isPrint } }"> <!-- Some code--></div>

WWW.2GIS.RUWWW.2GIS.RU

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

$context

$data

templateOptions

BINDING CONTEXT

WWW.2GIS.RUWWW.2GIS.RU

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

BINDING CONTEXT

● $parent● $parentContext● $root● $index● $element

WWW.2GIS.RUWWW.2GIS.RU

$context

$data

templateOptions

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

function initBalloon (options) { map.createBalloon({ point: options.point; content: options.template }); }

BINDINGS

WWW.2GIS.RUWWW.2GIS.RU

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

function initBalloon (options) { map.createBalloon({ point: options.point; content: options.template });

var container = $('#balloonContent'); ko.applyBindingsToNode(container , vm);}

BINDINGS

WWW.2GIS.RUWWW.2GIS.RU

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

КОГДА МНОГО "ЕСЛИ"

WWW.2GIS.RUWWW.2GIS.RU

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

this.showPreloader = ko.computed(function(){ return this.firmsLoad() && this.geoLoad();});

<span id="preloader" data-bind="visible: showPreloader"></span>

КОГДА МНОГО "ЕСЛИ"

WWW.2GIS.RUWWW.2GIS.RU

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

Не наблюдайте один computed внутри другого

KO.COMPUTED

WWW.2GIS.RUWWW.2GIS.RU

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

WWW.2GIS.RU

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

1. Не наблюдайте один computed внутри другого

KO.COMPUTED

Не меняйте observable внутри computed

WWW.2GIS.RUWWW.2GIS.RUWWW.2GIS.RU

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

WWW.2GIS.RU

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

1. Не наблюдайте один computed внутри другого2. Не меняйте observable внутри computed

KO.COMPUTED

Используйте computed только там, где это необходимо

WWW.2GIS.RUWWW.2GIS.RU

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

PLUGINS

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

PLUGINS

knockout.address

WWW.2GIS.RUWWW.2GIS.RU

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

PLUGINS

window.location vm.myObservable

ko.linkObservableToUrl(vm.history, 'history');

WWW.2GIS.RUWWW.2GIS.RU

knockout.address

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

PLUGINS

WWW.2GIS.RUWWW.2GIS.RU

$('#firmFull').dataBind({ animateVisible: isVisible, click: toggleVisibility});

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

https://gist.github.com/joelnet/1006808

PLUGINS

WWW.2GIS.RUWWW.2GIS.RU

Unobtrusive Knockout support library for jQuery

Joel Thoms

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

https://github.com/SteveSanderson/knockout/wiki/Plugins

PLUGINS

WWW.2GIS.RUWWW.2GIS.RU

Page 72: KnockoutJS на примере 2ГИС-Онлайн
Page 73: KnockoutJS на примере 2ГИС-Онлайн
Page 74: KnockoutJS на примере 2ГИС-Онлайн
Page 75: KnockoutJS на примере 2ГИС-Онлайн
Page 76: KnockoutJS на примере 2ГИС-Онлайн

БОЛЬШИЕ ПРОЕКТЫ

107 22 18

Observable Computed ObservableArray

WWW.2GIS.RUWWW.2GIS.RU

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

Functions

БОЛЬШИЕ ПРОЕКТЫ

200+ 107 22 18

WWW.2GIS.RUWWW.2GIS.RU

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

БОЛЬШИЕ ПРОЕКТЫ

18

WWW.2GIS.RUWWW.2GIS.RU

107200+13 22

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

Namespace.ViewModelModules.<ourModule> = { _observables: { <ourObservable>: <defaultData>, <ourComputed>: function(){/*computedCode*/} }, <someProperty>: 100500, _initModule: function(){/*initCode*/}, <function>: function(){/*fBody*/}}

БОЛЬШИЕ ПРОЕКТЫ

WWW.2GIS.RUWWW.2GIS.RU

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

Namespace.ViewModelModules.<ourModule> = { _observables: { <ourObservable>: <defaultData>, <ourComputed>: function(){/*computedCode*/} }, <someProperty>: 100500, _initModule: function(){/*initCode*/}, <function>: function(){/*fBody*/}}

WWW.2GIS.RU

БОЛЬШИЕ ПРОЕКТЫ

150

WWW.2GIS.RUWWW.2GIS.RU

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

https://github.com/2gis/dgKoModulizer

dgKoModulizer

WWW.2GIS.RUWWW.2GIS.RU

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

IDE

data-bind=" //очень много //кода //который выглядит //как одна сплошная строка"

WWW.2GIS.RUWWW.2GIS.RU

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

IDE

WWW.2GIS.RUWWW.2GIS.RU

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

IDE

WWW.2GIS.RUWWW.2GIS.RU

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

ПРОИЗВОДИТЕЛЬНОСТЬ

WWW.2GIS.RUWWW.2GIS.RU

DOM.Build()

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

АНАЛОГИ

— AngularJS— Backbone.js— Ember.js— ExtJS�— CorMVC— AsanaLuna— ...

WWW.2GIS.RUWWW.2GIS.RU

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

Илья Таратухин@darklifa