Contenu connexe Similaire à Knockout.JS на примере 2ГИС-Онлайн Similaire à Knockout.JS на примере 2ГИС-Онлайн (20) 7. АРХИТЕКТУРА CLIENT-SIDE APP
Пользователь
2ГИС Онлайн
API API API API API
Транспорта пробок <Место для
вашего сервиса>
Справочник Карт +1
WWW.2GIS.RU
9. DOM НА КЛИЕНТЕ
var newDiv = document.createElement('div');
newDiv.className = 'my-class';
newDiv.id = 'my-id';
newDiv.innerHTML = 'Привет, мир!';
document.body.appendChild(newDiv);
Привет, мир!
WWW.2GIS.RU
11. ШАБЛОНИЗАТОРЫ
jQueryTemplate
Mustache
Underscore.js
Шаблонизатор резига
Pure
WWW.2GIS.RU
12. СОБЫТИЯ
.firmShort .firmFull
#firmList
WWW.2GIS.RU
18. ПОЧЕМУ KNOCKOUT?
● Активно развивается
● Удобное разделение логики и шаблонов
Функционален, есть
декларативные биндинги
WWW.2GIS.RU
19. ПОЧЕМУ KNOCKOUT?
● Активно развивается
● Удобное разделение логики и шаблонов
● Функционален, есть декларативные
биндинги
Низкий порог вхождения
WWW.2GIS.RU
21. MVVM
UI Logic Business Logic
View Model
ViewModel
Application Logic
WWW.2GIS.RU
22. MVVM
Данные
ViewModel
Вспомогательные
функции
Связывание данных
KO с отображением
WWW.2GIS.RU
24. KNOCKOUT
<div>
<span data-bind="text: what"></span>,
<span data-bind="text: where"></span>
</div>
WWW.2GIS.RU
27. KO.OBSERVABLE
function vm() {
this.what = ko.observable('');
}
ko.applyBindings(new vm());
vm.what(response.what);
<span data-bind="text: what"></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
32. BINDINGS
<div>
<span data-bind="text: what"></span>,
<span data-bind="text: where"></span>
</div>
WWW.2GIS.RU
33. BINDINGS
- Текст и стиль блока
- Control flow
- Работа с формами
- Шаблонизация
- События
- <место для ваших идей>
WWW.2GIS.RU
34. BINDINGS
.firmShort .firmFull
#firmList
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
50. BINDING CONTEXT
● $data
● $parent
$context
● $parentContext
● $root
● $index
$element
WWW.2GIS.RU
53. BINDINGS
function initBalloon (options) {
map.createBalloon({
point: options.point;
content: options.template
});
var container = $('#balloonContent');
ko.applyBindingsToNode(container , vm);
}
WWW.2GIS.RU
55. КОГДА МНОГО "ЕСЛИ"
this.hidePreloader = ko.computed(function(){
return this.firmsLoad() && this.geoLoad();
});
<span id="preloader"
data-bind="visible: !hidePreloader">
</span>
WWW.2GIS.RU
56. KO.COMPUTED
Не наблюдайте один computed
внутри другого
WWW.2GIS.RU
58. KO.COMPUTED
1. Не наблюдайте один computed внутри другого
2. Не меняйте observable внутри computed
Используйте computed только там,
где это необходимо
WWW.2GIS.RU
60. PLUGINS
knockout.address
WWW.2GIS.RU
64. PLUGINS
https://github.com/SteveSanderson/knockout/wiki/Plugins
WWW.2GIS.RU
66. БОЛЬШИЕ ПРОЕКТЫ
107 22 18
Computed Observable
Observable Array
WWW.2GIS.RU
70. БОЛЬШИЕ ПРОЕКТЫ
Namespace.ViewModelModules.ourModule = {
_observables: {
ourObservable: "",
ourObservableArray: [],
ourComputed: function(){}
},
150
_initModule: function(){/*initCode*/},
someProperty: 100500,
someFunction: function(){/*fBody*/}
}
WWW.2GIS.RU
WWW.2GIS.RU
74. АНАЛОГИ
- AngularJS
- Backbone.js
- Ember.js
- ExtJS
- CorMVC
- AsanaLuna
- ...
WWW.2GIS.RU
