Contenu connexe Similaire à Knockoutjs на примере 2ГИС-Онлайн Similaire à Knockoutjs на примере 2ГИС-Онлайн (20) 2. ДОКЛАДЧИК
С 2011 года работаю в 2ГИС
API справочника API карт Карты 2ГИС
>5 млн >8 млн >3 млн
Разрабатывал АСУ ТП Спикер CodeFest
для горно-шахтного 2012
оборудования
WWW.2GIS.RU
9. АРХИТЕКТУРА CLIENT-SIDE APP
Пользователь
API API API API API
Транспорта пробок <Место для
вашего сервиса>
Справочник Карт +1
2ГИС Онлайн
WWW.2GIS.RU
11. DOM НА КЛИЕНТЕ
var newDiv = document.createElement('div');
newDiv.className = 'my-class';
newDiv.id = 'my-id';
newDiv.innerHTML = 'Привет, мир!';
$('#container').appendChild(newDiv);
Привет, мир!
WWW.2GIS.RU
13. ШАБЛОНИЗАТОРЫ
jQueryTemplate
Mustache
Underscore.js
Шаблонизатор резига
Pure
WWW.2GIS.RU
14. СОБЫТИЯ
.firmFull
#firmList
.firmShort
WWW.2GIS.RU
20. ПОЧЕМУ KNOCKOUT?
• Активно развивается
Удобное разделение
логики и шаблонов
WWW.2GIS.RU
21. ПОЧЕМУ KNOCKOUT?
• Активно развивается
• Удобное разделение логики и шаблонов
Функционален, есть
декларативные биндинги
WWW.2GIS.RU
22. ПОЧЕМУ KNOCKOUT?
• Активно развивается
• Удобное разделение логики и шаблонов
• Функционален, есть декларативные
биндинги
Низкий порог вхождения
WWW.2GIS.RU
24. MVVM
UI Logic Business Logic
View Model
ViewModel
Application Logic
WWW.2GIS.RU
27. KO.OBSERVABLE
function vm() {
this.what_text = ko.observable('');
}
ko.applyBindings(new vm());
...
vm.what_text(response.what);
<span data-bind="text: what_text"></span>
WWW.2GIS.RU
30. KO.OBSERVABLE_ARRAY
function vm () {
this.firms = ko.observableArray([]);
}
...
vm.firms(response.result);
<div data-bind="foreach: firms">
<div data-bind="text: firmName"></div>
</div>
WWW.2GIS.RU
33. BINDINGS
- Текст и стиль блока
- Control flow
- Работа с формами
- Шаблонизация
- <место для ваших идей>
WWW.2GIS.RU
34. BINDINGS
#firmList
.firmFull
.firmShort
WWW.2GIS.RU
35. 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>
WWW.2GIS.RU
40. 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";
}};
WWW.2GIS.RU
41. 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);
}};
WWW.2GIS.RU
52. BINDINGS
<div class="contacts"
data-bind="template: {
name: 'firm-tpl',
data: $data,
templateOptions: {
isPrint: $context.isPrint
}
}">
<!-- Some code-->
</div>
WWW.2GIS.RU
54. BINDING CONTEXT
• $parent
$context • $parentContext
$data • $root
templateOptions • $index
• $element
WWW.2GIS.RU
57. BINDINGS
function initBalloon (options) {
map.createBalloon({
point: options.point;
content: options.template
});
var container = $('#balloonContent');
ko.applyBindingsToNode(container ,
vm);}
WWW.2GIS.RU
59. КОГДА МНОГО "ЕСЛИ"
this.showPreloader = ko.computed(function(){
return this.firmsLoad() &&
this.geoLoad();});
<span id="preloader"
data-bind="visible: showPreloader">
</span>
WWW.2GIS.RU
60. KO.COMPUTED
Не наблюдайте один computed
внутри другого
WWW.2GIS.RU
62. KO.COMPUTED
1. Не наблюдайте один computed внутри другого
2. Не меняйте observable внутри computed
Используйте computed только там,
где это необходимо
WWW.2GIS.RU
66. PLUGINS
https://github.com/SteveSanderson/knockout/wiki/Plugins
WWW.2GIS.RU
69. БОЛЬШИЕ ПРОЕКТЫ
107 22 18
Computed Observable
Observable Array
WWW.2GIS.RU
73. БОЛЬШИЕ ПРОЕКТЫ
Namespace.ViewModelModules.<ourModule> = {
_observables: {
<ourObservable>: <defaultData>,
150
<ourComputed>:
function(){/*computedCode*/}
},
<someProperty>: 100500,
_initModule: function(){/*initCode*/},
<function>: function(){/*fBody*/}}
WWW.2GIS.RU
WWW.2GIS.RU
77. АНАЛОГИ
- AngularJS
- Backbone.js
- Ember.js
- ExtJS
- CorMVC
- AsanaLuna
- ...
WWW.2GIS.RU
