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

Пользователь
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

ШАБЛОНИЗАТОРЫ
jQueryTemplate
Mustache
Underscore.js
Шаблонизатор резига
Pure
WWW.2GIS.RUWWW.2GIS.RU

СОБЫТИЯ
.firmShort
.firmFull#firmList

СОБЫТИЯ
$("#firmTemplate").tmpl(someData)
.appendTo("#firmList");
$('.firmShort').live({
click: function() {
showFirmCard(this);
}
});
$('.firmFull').live({
click: function() {
hideFirmCard(this);
}
});

ПОЧЕМУ 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

<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,
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,
toggleVisibility = function() {
this.isVisible(!this.isVisible());
}
BINDINGS

BINDING-CONTEXT
vm
vm.firms[n]

ПЕЧАТЬ

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

1. Не наблюдайте один computed внутри другого
KO.COMPUTED
Не меняйте observable внутри
computed
WWW.2GIS.RUWWW.2GIS.RUWWW.2GIS.RU

1. Не наблюдайте один computed внутри другого
2. Не меняйте observable внутри computed
KO.COMPUTED
Используйте computed только там,
где это необходимо

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

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="
//очень много
//кода
//который выглядит
//как одна сплошная строка
"

ПРОИЗВОДИТЕЛЬНОСТЬ
DOM.Build()

АНАЛОГИ
— AngularJS
— Backbone.js
— Ember.js
— ExtJS
— CorMVC
— AsanaLuna
— ...

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

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

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

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

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

More from it-people

More from it-people (20)

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