Knockout.JS на примере 2ГИС-Онлайн
description
Transcript of Knockout.JS на примере 2ГИС-Онлайн
![Page 1: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/1.jpg)
САЛЬНИКОВ СТАНИСЛАВ
KNOCKOUT.js НА ПРИМЕРЕ 2ГИС-ОНЛАЙН
![Page 2: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/2.jpg)
![Page 3: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/3.jpg)
![Page 4: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/4.jpg)
![Page 5: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/5.jpg)
![Page 6: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/6.jpg)
WWW.2GIS.RU
Пользователь
2ГИС Онлайн
API Справочника
АРХИТЕКТУРА WEB-APP
![Page 7: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/7.jpg)
АРХИТЕКТУРА CLIENT-SIDE APP
Пользователь
2ГИС Онлайн
API Транспорта
API пробок
API <Место для
вашего сервиса>
API Справочник
API Карт +1
WWW.2GIS.RU
![Page 8: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/8.jpg)
DOM НА КЛИЕНТЕ
WWW.2GIS.RU
![Page 9: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/9.jpg)
DOM НА КЛИЕНТЕ
var newDiv = document.createElement('div'); newDiv.className = 'my-class'; newDiv.id = 'my-id'; newDiv.innerHTML = 'Привет, мир!';
document.body.appendChild(newDiv);
Привет, мир!
WWW.2GIS.RU
![Page 10: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/10.jpg)
WHERE IS
![Page 11: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/11.jpg)
ШАБЛОНИЗАТОРЫ
jQueryTemplate
Mustache
Underscore.js
Шаблонизатор резига
Pure
WWW.2GIS.RUWWW.2GIS.RU
![Page 12: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/12.jpg)
СОБЫТИЯ
.firmShort .firmFull
WWW.2GIS.RUWWW.2GIS.RU
#firmList
![Page 13: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/13.jpg)
СОБЫТИЯ
$("#firmTemplate").tmpl(someData).appendTo("#firmList");
$('.firmShort').live({ click: function() { showFirmCard(this); } });
$('.firmFull').live({ click: function() { hideFirmCard(this); } });WWW.2GIS.RUWWW.2GIS.RU
![Page 14: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/14.jpg)
WWW.2GIS.RUWWW.2GIS.RU
СОБЫТИЯ
![Page 15: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/15.jpg)
KNOCKOUT
WWW.2GIS.RUWWW.2GIS.RU
![Page 16: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/16.jpg)
ПОЧЕМУ KNOCKOUT?
Активно развивается
WWW.2GIS.RUWWW.2GIS.RU
![Page 17: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/17.jpg)
● Активно развивается
ПОЧЕМУ KNOCKOUT?
Удобное разделение логики и шаблонов
WWW.2GIS.RUWWW.2GIS.RU
![Page 18: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/18.jpg)
● Активно развивается● Удобное разделение логики и шаблонов
ПОЧЕМУ KNOCKOUT?
Функционален, есть декларативные биндинги
WWW.2GIS.RUWWW.2GIS.RU
![Page 19: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/19.jpg)
● Активно развивается● Удобное разделение логики и шаблонов● Функционален, есть декларативные
биндинги
ПОЧЕМУ KNOCKOUT?
Низкий порог вхождения
WWW.2GIS.RUWWW.2GIS.RU
![Page 20: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/20.jpg)
![Page 21: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/21.jpg)
MVVM
View Model
ViewModel
UI Logic Business Logic
Application Logic
WWW.2GIS.RUWWW.2GIS.RU
![Page 22: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/22.jpg)
MVVM
ViewModel
WWW.2GIS.RUWWW.2GIS.RU
Данные
Вспомогательные функции
Связывание данных с отображениемKO
![Page 23: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/23.jpg)
KNOCKOUT
WWW.2GIS.RUWWW.2GIS.RU
![Page 24: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/24.jpg)
<div> <span data-bind="text: what"></span>, <span data-bind="text: where"></span></div>
KNOCKOUT
WWW.2GIS.RUWWW.2GIS.RU
![Page 25: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/25.jpg)
function vm() {this.what = ko.observable('');
}
KO.OBSERVABLE
WWW.2GIS.RUWWW.2GIS.RU
![Page 26: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/26.jpg)
function vm() {this.what = ko.observable('');
}ko.applyBindings(new vm());
KO.OBSERVABLE
WWW.2GIS.RUWWW.2GIS.RU
![Page 27: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/27.jpg)
function vm() {this.what = ko.observable('');
}ko.applyBindings(new vm());
vm.what(response.what);
<span data-bind="text: what"></span>
KO.OBSERVABLE
WWW.2GIS.RUWWW.2GIS.RU
![Page 28: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/28.jpg)
МАССИВЫ
WWW.2GIS.RUWWW.2GIS.RU
![Page 29: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/29.jpg)
response.result = [ { firmName = 'Завод №1', ... }, { firmName = 'Завод №2'; ... }]
МАССИВЫ
WWW.2GIS.RUWWW.2GIS.RU
![Page 30: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/30.jpg)
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
WWW.2GIS.RUWWW.2GIS.RU
![Page 31: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/31.jpg)
BINDINGS
WWW.2GIS.RUWWW.2GIS.RU
![Page 32: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/32.jpg)
<div> <span data-bind="text: what"></span>, <span data-bind="text: where"></span></div>
BINDINGS
WWW.2GIS.RUWWW.2GIS.RU
![Page 33: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/33.jpg)
BINDINGS
- Текст и стиль блока
- Control flow
- Работа с формами
- Шаблонизация
- События
WWW.2GIS.RUWWW.2GIS.RU
- <место для ваших идей>
![Page 34: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/34.jpg)
BINDINGS
.firmShort .firmFull
WWW.2GIS.RUWWW.2GIS.RU
#firmList
![Page 35: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/35.jpg)
<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
WWW.2GIS.RUWWW.2GIS.RU
![Page 36: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/36.jpg)
BINDINGS
WWW.2GIS.RUWWW.2GIS.RU
![Page 37: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/37.jpg)
data-bind="visible: isVisible,click: toggleVisibility"
BINDINGS
WWW.2GIS.RUWWW.2GIS.RU
![Page 38: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/38.jpg)
data-bind="visible: isVisible,click: toggleVisibility"
toggleVisibility = function() { this.isVisible(!this.isVisible());}
BINDINGS
WWW.2GIS.RUWWW.2GIS.RU
![Page 39: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/39.jpg)
![Page 40: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/40.jpg)
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
WWW.2GIS.RUWWW.2GIS.RU
![Page 41: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/41.jpg)
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
WWW.2GIS.RUWWW.2GIS.RU
![Page 42: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/42.jpg)
data-bind="animateVisible: isVisible,click: toggleVisibility"
toggleVisibility = function() { this.isVisible(!this.isVisible());}
BINDINGS
WWW.2GIS.RUWWW.2GIS.RU
![Page 43: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/43.jpg)
![Page 44: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/44.jpg)
<script type="text/my-tpl" id="firm-tpl"> // Put yor awesome template here!</script>
BINDINGS
WWW.2GIS.RUWWW.2GIS.RU
![Page 45: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/45.jpg)
<script type="text/my-tpl" id="catalog-tpl"> <div data-bind="template: { name: 'firm-tpl', foreach: firms }"></div>
</script>
BINDINGS
WWW.2GIS.RUWWW.2GIS.RU
![Page 46: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/46.jpg)
BINDING-CONTEXT
vm
vm.firms[n]
WWW.2GIS.RUWWW.2GIS.RU
![Page 47: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/47.jpg)
context === $data
BINDING-CONTEXT
WWW.2GIS.RUWWW.2GIS.RU
![Page 48: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/48.jpg)
context === $data$data === $context.$data
BINDING-CONTEXT
WWW.2GIS.RUWWW.2GIS.RU
![Page 49: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/49.jpg)
BINDINGS
<div class="contacts" data-bind="template: { name: 'firm-tpl', data: $data }"> <!-- Some code--></div>
WWW.2GIS.RUWWW.2GIS.RU
![Page 50: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/50.jpg)
BINDING CONTEXT
$context
$element
● $data● $parent● $parentContext● $root● $index
WWW.2GIS.RUWWW.2GIS.RU
![Page 51: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/51.jpg)
![Page 52: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/52.jpg)
function initBalloon (options) { map.createBalloon({ point: options.point; content: options.template }); }
BINDINGS
WWW.2GIS.RUWWW.2GIS.RU
![Page 53: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/53.jpg)
function initBalloon (options) { map.createBalloon({ point: options.point; content: options.template });
var container = $('#balloonContent'); ko.applyBindingsToNode(container , vm);}
BINDINGS
WWW.2GIS.RUWWW.2GIS.RU
![Page 54: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/54.jpg)
КОГДА МНОГО "ЕСЛИ"
WWW.2GIS.RUWWW.2GIS.RU
![Page 55: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/55.jpg)
this.hidePreloader = ko.computed(function(){ return this.firmsLoad() && this.geoLoad();});
<span id="preloader" data-bind="visible: !hidePreloader"></span>
КОГДА МНОГО "ЕСЛИ"
WWW.2GIS.RUWWW.2GIS.RU
![Page 56: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/56.jpg)
Не наблюдайте один computed внутри другого
KO.COMPUTED
WWW.2GIS.RUWWW.2GIS.RU
![Page 57: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/57.jpg)
1. Не наблюдайте один computed внутри другого
KO.COMPUTED
Не меняйте observable внутри computed
WWW.2GIS.RUWWW.2GIS.RU
![Page 58: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/58.jpg)
1. Не наблюдайте один computed внутри другого2. Не меняйте observable внутри computed
KO.COMPUTED
Используйте computed только там, где это необходимо
WWW.2GIS.RUWWW.2GIS.RU
![Page 59: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/59.jpg)
PLUGINS
WWW.2GIS.RUWWW.2GIS.RU
![Page 60: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/60.jpg)
PLUGINS
knockout.address
WWW.2GIS.RUWWW.2GIS.RU
![Page 61: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/61.jpg)
PLUGINS
WWW.2GIS.RUWWW.2GIS.RU
![Page 62: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/62.jpg)
PLUGINS
window.location vm.myObservable
WWW.2GIS.RUWWW.2GIS.RU
![Page 63: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/63.jpg)
PLUGINS
window.location vm.myObservable
WWW.2GIS.RUWWW.2GIS.RU
ko.linkObservableToUrl(vm.history, 'history');
![Page 64: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/64.jpg)
https://github.com/SteveSanderson/knockout/wiki/Plugins
PLUGINS
WWW.2GIS.RUWWW.2GIS.RU
![Page 65: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/65.jpg)
![Page 66: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/66.jpg)
БОЛЬШИЕ ПРОЕКТЫ
107 22 18
ObservableComputed Observable
Array
WWW.2GIS.RUWWW.2GIS.RU
![Page 67: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/67.jpg)
Functions
БОЛЬШИЕ ПРОЕКТЫ
200+ 107 22 18
WWW.2GIS.RUWWW.2GIS.RU
![Page 68: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/68.jpg)
БОЛЬШИЕ ПРОЕКТЫ
200+ 107
22
18
13WWW.2GIS.RUWWW.2GIS.RU
![Page 69: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/69.jpg)
Namespace.ViewModelModules.ourModule = { _observables: { ourObservable: "", ourObservableArray: [], ourComputed: function(){} },
_initModule: function(){/*initCode*/},
someProperty: 100500,
someFunction: function(){/*fBody*/}}
БОЛЬШИЕ ПРОЕКТЫ
WWW.2GIS.RUWWW.2GIS.RU
![Page 70: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/70.jpg)
Namespace.ViewModelModules.ourModule = { _observables: { ourObservable: "", ourObservableArray: [], ourComputed: function(){} },
_initModule: function(){/*initCode*/},
someProperty: 100500,
someFunction: function(){/*fBody*/}}
WWW.2GIS.RU
БОЛЬШИЕ ПРОЕКТЫ
150
WWW.2GIS.RUWWW.2GIS.RU
![Page 71: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/71.jpg)
IDE
data-bind=" //очень много //кода //который выглядит //как одна сплошная строка"
WWW.2GIS.RUWWW.2GIS.RU
![Page 72: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/72.jpg)
IDE
WWW.2GIS.RUWWW.2GIS.RU
![Page 73: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/73.jpg)
WWW.2GIS.RU
IDE
WWW.2GIS.RUWWW.2GIS.RU
![Page 74: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/74.jpg)
АНАЛОГИ
- AngularJS- Backbone.js- Ember.js- ExtJS- CorMVC- AsanaLuna- ...
WWW.2GIS.RUWWW.2GIS.RU
![Page 75: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/75.jpg)
ВОПРОСЫ?
WWW.2GIS.RUWWW.2GIS.RU
![Page 76: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/76.jpg)
![Page 77: Knockout.JS на примере 2ГИС-Онлайн](https://reader031.fdocuments.net/reader031/viewer/2022013121/5478ea4db479595e098b4636/html5/thumbnails/77.jpg)