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

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

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

2ГИС-ОНЛАЙН

ДОКЛАДЧИК

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

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

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

Спикер CodeFest

2012

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

>5 млн API карт

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

>3 млн

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

WWW.2GIS.RU

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

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

Привет, мир!

WWW.2GIS.RU

WHERE IS

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

jQueryTemplate

Mustache

Underscore.js

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

Pure

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

http://javascript.ru/unsorted/templating

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

}

});


СОБЫТИЯ


KNOCKOUT


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


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


what_text"></span>,


where_text"></span></div>

BINDINGS


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


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


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

$context

$data

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 ,

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


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

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

KO.COMPUTED

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

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


PLUGINS


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

Array


Functions


200+ 107 22 18



200+ 107

22

18

13


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


IDE

data-bind="

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

//кода

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

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

"


IDE


WWW.2GIS.RU

IDE


АНАЛОГИ

- AngularJS

- Backbone.js

- Ember.js

- ExtJS

- CorMVC

- AsanaLuna

- ...


ВОПРОСЫ?


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

Documents

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