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

ИЛЬЯ ТАРАТУХИН

KNOCKOUT.js НА ПРИМЕРЕ

2ГИС-ОНЛАЙН

ДОКЛАДЧИК

Разрабатывал АСУ ТП

для горно-шахтного

оборудования

Спикер CodeFest

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

>5 млн API карт

>8 млн Карты 2ГИС

>3 млн

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

WWW.2GIS.RU

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

2ГИС Онлайн

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

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

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

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

2ГИС Онлайн

Транспорта

пробок

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

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

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

СОБЫТИЯ

.firmShort

.firmFull #firmList

СОБЫТИЯ

$("#firmTemplate").tmpl(someData)

.appendTo("#firmList");

$('.firmShort').live({

click: function() {

showFirmCard(this);

$('.firmFull').live({

click: function() {

hideFirmCard(this);

СОБЫТИЯ

KNOCKOUT

ПОЧЕМУ KNOCKOUT?

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

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

Удобное разделение

логики и шаблонов

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

Функционален, есть

декларативные биндинги

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

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

биндинги

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

View Model

ViewModel

UI Logic Business Logic

Application Logic

KNOCKOUT

<span data-bind="text:

what_text"></span>,

where_text"></span></div>

KNOCKOUT

function vm() {

this.what_text = ko.observable('');

ko.applyBindings(new vm());

vm.what_text(response.what);

KO.OBSERVABLE

МАССИВЫ

response.result = [

firmName = 'Завод №1',

firmName = 'Завод №2';

МАССИВЫ

function vm () {

this.firms = ko.observableArray([]);

vm.firms(response.result);

</div>

KO.OBSERVABLE_ARRAY

BINDINGS

what_text"></span>,

where_text"></span></div>

BINDINGS

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

- Control flow

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

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

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

.firmShort

.firmFull

BINDINGS

#firmList

<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

//firm template code</script>

BINDINGS

//some template code

<div data-bind="template: {

foreach: firms

}"></div>

</script>

BINDINGS

BINDING-CONTEXT

vm.firms[n]

ПЕЧАТЬ

//some template code

<div data-bind="template: {

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

data: $data,

templateOptions: {

isPrint: $context.isPrint

</div>

$context

templateOptions

BINDING CONTEXT

$context

templateOptions

• $parent

• $parentContext

• $root

• $index

• $element

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 ,

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

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

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

KO.COMPUTED

Используйте computed только там,

где это необходимо

PLUGINS

knockout.address

PLUGINS

knockout.address

window.location vm.myObservable

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

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

PLUGINS

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

107 22 18

Observable

Computed Observable

Functions

200+ 107 22 18

200+ 107

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

data-bind="

//очень много

//кода

//который выглядит

//как одна сплошная строка

WWW.2GIS.RU

АНАЛОГИ

- AngularJS

- Backbone.js

- Ember.js

- ExtJS

- CorMVC

- AsanaLuna

ВОПРОСЫ?

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

Documents

«CI. Jenkins. 2GIS» — Игорь Павлов, 2ГИС

Злата Баяндина. Nsk ProductCamp @ 2ГИС

«Новый 2ГИС Online» — Влад Семенов, 2ГИС

«Архитектура Справочного API 2ГИС» — Сергей Коржнев, 2ГИС

Жизнь HTML в 2ГИС под iOS / Роман Янке (2гис)

2ГИС: Как привлечь больше клиентов

«Практический опыт внедрения Clustered Data ONTAP в компании 2ГИС» — Константин Ериков, 2ГИС

Роман Петров. Nsk ProductCamp @ 2ГИС

Презентация франшизы 2ГИС

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

Продвижение Вашего бизнеса с 2ГИС

Партицирование и миграции данных на примере PostgreSQL, Денис Иванов (2ГИС)

Alphorm.com Formation knockoutJS

«Автоматизация тестирования» — 2ГИС Павел Сташевский, 2ГИС

Дмитрий Сысоев. Nsk ProductCamp @ 2ГИС

Павел Мочалкин. Nsk ProductCamp @ 2ГИС

2ГИС: геоконтекстная реклама для бизнеса

20140712 knockoutjs-hands-on-in-osaka

Типографика: восток – Роман Прудников, 2ГИС

DevLOVE Kansai KnockoutJS