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

САЛЬНИКОВ СТАНИСЛАВ

KNOCKOUT.js НА ПРИМЕРЕ 2ГИС-ОНЛАЙН

WWW.2GIS.RU

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

2ГИС Онлайн

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

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

АРХИТЕКТУРА 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

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

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


ПОЧЕМУ KNOCKOUT?

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


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


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


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


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


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

биндинги


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


MVVM

View Model

ViewModel

UI Logic Business Logic

Application Logic


MVVM

ViewModel


Данные

Вспомогательные функции

Связывание данных с отображениемKO

KNOCKOUT


<div> <span data-bind="text: what"></span>, <span data-bind="text: where"></span></div>

KNOCKOUT


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

}

KO.OBSERVABLE



}ko.applyBindings(new vm());

KO.OBSERVABLE



}ko.applyBindings(new vm());

vm.what(response.what);

<span data-bind="text: what"></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> <span data-bind="text: what"></span>, <span data-bind="text: where"></span></div>

BINDINGS


BINDINGS

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

- Control flow

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

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

- События


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

BINDINGS

.firmShort .firmFull


#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


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


BINDING-CONTEXT

vm

vm.firms[n]


context === $data

BINDING-CONTEXT


context === $data$data === $context.$data

BINDING-CONTEXT


BINDINGS

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

BINDING CONTEXT

$context

$element

● $data● $parent● $parentContext● $root● $index


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.hidePreloader = ko.computed(function(){ return this.firmsLoad() && this.geoLoad();});

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

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


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

KO.COMPUTED


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

KO.COMPUTED

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


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

KO.COMPUTED

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


PLUGINS


PLUGINS

knockout.address


PLUGINS


PLUGINS

window.location vm.myObservable


PLUGINS

window.location vm.myObservable


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

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

PLUGINS




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

107 22 18

ObservableComputed Observable

Array


Functions


200+ 107 22 18



200+ 107

22

18

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

Namespace.ViewModelModules.ourModule = { _observables: { ourObservable: "", ourObservableArray: [], ourComputed: function(){} },

_initModule: function(){/*initCode*/},

someProperty: 100500,

someFunction: function(){/*fBody*/}}



Namespace.ViewModelModules.ourModule = { _observables: { ourObservable: "", ourObservableArray: [], ourComputed: function(){} },

_initModule: function(){/*initCode*/},

someProperty: 100500,

someFunction: function(){/*fBody*/}}

WWW.2GIS.RU


150


IDE

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


IDE


WWW.2GIS.RU

IDE


АНАЛОГИ

- AngularJS- Backbone.js- Ember.js- ExtJS- CorMVC- AsanaLuna- ...


ВОПРОСЫ?


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

Documents