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

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

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

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

2ГИС Онлайн

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

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

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 = 'Привет, мир!';

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

Привет, мир!

WWW.2GIS.RU

WHERE IS

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

jQueryTemplate

Mustache

Underscore.js

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

Pure

WWW.2GIS.RUWWW.2GIS.RU

http://javascript.ru/unsorted/templating

СОБЫТИЯ

.firmShort

.firmFull#firmList


СОБЫТИЯ

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

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

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

СОБЫТИЯ

ПОЧЕМУ KNOCKOUT?

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


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


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


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


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


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

биндинги


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


MVVM

View Model

ViewModel

UI Logic Business Logic

Application Logic


KNOCKOUT


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

KNOCKOUT


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


МАССИВЫ


response.result = [ { firmName = 'Театр №1', ... }, { firmName = 'Театр №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


BINDINGS

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

BINDINGS


BINDINGS

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

— Control flow

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

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

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


.firmShort

.firmFull#firmList


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>

BINDINGS


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

BINDINGS


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

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

BINDINGS


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


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


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

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

BINDINGS


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

BINDINGS


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

BINDINGS


BINDINGS

BINDING-CONTEXT

vm

vm.firms[n]


ПЕЧАТЬ


<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>

ПЕЧАТЬ


BINDINGS

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


BINDINGS

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


$context

$data

templateOptions

BINDING CONTEXT


BINDING CONTEXT

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


$context

$data

templateOptions

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

BINDINGS


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

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

BINDINGS


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


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

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

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


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

KO.COMPUTED


WWW.2GIS.RU

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

KO.COMPUTED

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

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

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

KO.COMPUTED

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


PLUGINS

PLUGINS

knockout.address


PLUGINS

window.location vm.myObservable

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


knockout.address

PLUGINS


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

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

PLUGINS


Unobtrusive Knockout support library for jQuery

Joel Thoms



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

PLUGINS




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

107 22 18

Observable Computed ObservableArray


Functions


200+ 107 22 18



18


107200+13 22

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



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

WWW.2GIS.RU


150


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

dgKoModulizer




IDE

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


IDE


IDE


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


DOM.Build()

АНАЛОГИ

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


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

Technology

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