Weitere ähnliche Inhalte Ähnlich wie KnockoutJS на примере 2ГИС-Онлайн (20) KnockoutJS на примере 2ГИС-Онлайн11. DOM НА КЛИЕНТЕ
var newDiv = document.createElement('div');
newDiv.className = 'my-class';
newDiv.id = 'my-id';
newDiv.innerHTML = 'Привет, мир!';
$('#container').appendChild(newDiv);
Привет, мир!
WWW.2GIS.RU
21. ● Активно развивается
● Удобное разделение логики и шаблонов
ПОЧЕМУ KNOCKOUT?
Функционален, есть
декларативные биндинги
WWW.2GIS.RUWWW.2GIS.RU
22. ● Активно развивается
● Удобное разделение логики и шаблонов
● Функционален, есть декларативные
биндинги
ПОЧЕМУ KNOCKOUT?
Низкий порог вхождения
WWW.2GIS.RUWWW.2GIS.RU
27. 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
WWW.2GIS.RUWWW.2GIS.RU
30. 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
33. BINDINGS
— Текст и стиль блока
— Control flow
— Работа с формами
— Шаблонизация
— <место для ваших идей>
WWW.2GIS.RUWWW.2GIS.RU
40. 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
41. 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
57. function initBalloon (options) {
map.createBalloon({
point: options.point;
content: options.template
});
var container = $('#balloonContent');
ko.applyBindingsToNode(container , vm);
}
BINDINGS
WWW.2GIS.RUWWW.2GIS.RU
62. 1. Не наблюдайте один computed внутри другого
KO.COMPUTED
Не меняйте observable внутри
computed
WWW.2GIS.RUWWW.2GIS.RUWWW.2GIS.RU
64. 1. Не наблюдайте один computed внутри другого
2. Не меняйте observable внутри computed
KO.COMPUTED
Используйте computed только там,
где это необходимо
WWW.2GIS.RUWWW.2GIS.RU
79. Namespace.ViewModelModules.<ourModule> = {
_observables: {
<ourObservable>: <defaultData>,
<ourComputed>: function()
{/*computedCode*/}
},
<someProperty>: 100500,
_initModule: function(){/*initCode*/},
<function>: function(){/*fBody*/}
}
БОЛЬШИЕ ПРОЕКТЫ
WWW.2GIS.RUWWW.2GIS.RU
80. Namespace.ViewModelModules.<ourModule> = {
_observables: {
<ourObservable>: <defaultData>,
<ourComputed>: function()
{/*computedCode*/}
},
<someProperty>: 100500,
_initModule: function(){/*initCode*/},
<function>: function(){/*fBody*/}
}
WWW.2GIS.RU
БОЛЬШИЕ ПРОЕКТЫ
150
WWW.2GIS.RUWWW.2GIS.RU