Download to read offline
![МАССИВЫ
response.result = [
{
firmName = 'Завод №1',
...
},
{
firmName = 'Завод №2';
...
}]
WWW.2GIS.RU](https://image.slidesharecdn.com/uwdc-knockout-130304000514-phpapp02/75/Knockoutjs-2-29-2048.jpg)
![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](https://image.slidesharecdn.com/uwdc-knockout-130304000514-phpapp02/75/Knockoutjs-2-30-2048.jpg)
![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](https://image.slidesharecdn.com/uwdc-knockout-130304000514-phpapp02/75/Knockoutjs-2-40-2048.jpg)
![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](https://image.slidesharecdn.com/uwdc-knockout-130304000514-phpapp02/75/Knockoutjs-2-41-2048.jpg)
![BINDING-CONTEXT
vm
vm.firms[n]
WWW.2GIS.RU](https://image.slidesharecdn.com/uwdc-knockout-130304000514-phpapp02/75/Knockoutjs-2-48-2048.jpg)
Uploaded by2ГИС Технологии
Knockoutjs на примере 2ГИС-Онлайн
Доклад Ильи Таратухина посвящен использованию Knockout.js в разработке веб-приложений на примере 2ГИС. В нем рассматриваются основные концепции MVVM, биндингов, шаблонизаторов и динамического взаимодействия с данными. Доклад также акцентирует внимание на удобстве разделения логики и шаблонов, а также простоте использования Knockout.js для создания интерактивных интерфейсов.
More Related Content
Knockoutjs на примере 2ГИС-Онлайн
- 1. ИЛЬЯ ТАРАТУХИН KNOCKOUT.js НАПРИМЕРЕ 2ГИС-ОНЛАЙН
- 2. ДОКЛАДЧИК С 2011 годаработаю в 2ГИС API справочника API карт Карты 2ГИС >5 млн >8 млн >3 млн Разрабатывал АСУ ТП Спикер CodeFest для горно-шахтного 2012 оборудования WWW.2GIS.RU
- 8. АРХИТЕКТУРА WEB-APP Пользователь 2ГИС Онлайн API Справочника WWW.2GIS.RU
- 9. АРХИТЕКТУРА CLIENT-SIDE APP Пользователь API API API API API Транспорта пробок <Место для вашего сервиса> Справочник Карт +1 2ГИС Онлайн WWW.2GIS.RU
- 10.
- 11. DOM НА КЛИЕНТЕ var newDiv = document.createElement('div'); newDiv.className = 'my-class'; newDiv.id = 'my-id'; newDiv.innerHTML = 'Привет, мир!'; $('#container').appendChild(newDiv); Привет, мир! WWW.2GIS.RU
- 12.
- 13. ШАБЛОНИЗАТОРЫ jQueryTemplate Mustache Underscore.js Шаблонизатор резига Pure WWW.2GIS.RU
- 14. СОБЫТИЯ .firmFull #firmList .firmShort WWW.2GIS.RU
- 15. СОБЫТИЯ $("#firmTemplate").tmpl(someData) .appendTo("#firmList"); $('.firmShort').live({ click: function() { showFirmCard(this); } }); $('.firmFull').live({ click: function() { hideFirmCard(this); } }); WWW.2GIS.RU
- 16.
- 18.
- 19. ПОЧЕМУ KNOCKOUT? Активно развивается 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
- 25.
- 26. KNOCKOUT <div class="dg-search-result-header"> <span data-bind="text: what_text"></span>, <span data-bind="text: where_text"></span></div> 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
- 28.
- 29. МАССИВЫ response.result = [ { firmName = 'Завод №1', ... }, { firmName = 'Завод №2'; ... }] 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
- 31.
- 32. BINDINGS <div class="dg-search-result-header"> <span data-bind="text: what_text"></span>, <span data-bind="text: where_text"></span></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
- 36.
- 37. BINDINGS data-bind="visible: isVisible, click: toggleVisibility" WWW.2GIS.RU
- 38. BINDINGS data-bind="visible: isVisible, click: toggleVisibility" toggleVisibility = function() { this.isVisible(!this.isVisible());} 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
- 42. BINDINGS data-bind="animateVisible: isVisible, click: toggleVisibility" toggleVisibility = function() { this.isVisible(!this.isVisible());} WWW.2GIS.RU
- 45. BINDINGS <script type="text/my-tpl" id="firm-tpl"> //firm template code</script> WWW.2GIS.RU
- 46. BINDINGS <script type="text/my-tpl" id="catalog-tpl"> //some template code <div data-bind="template: { name: 'firm-tpl', foreach: firms }"></div> </script> WWW.2GIS.RU
- 47.
- 48. BINDING-CONTEXT vm vm.firms[n] WWW.2GIS.RU
- 49.
- 50. ПЕЧАТЬ <script type="text/my-tpl" id="print-tpl"> //some template code <div data-bind="template: { name: 'firm-tpl', foreach: firms, templateOptions: { isPrint: 1 } }"></div> </script> WWW.2GIS.RU
- 51. BINDINGS <div class="phone-number" data-bind="visible: $context.isPrint)"> <!-- Some code--> </div> 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
- 53. BINDING CONTEXT $context $data templateOptions WWW.2GIS.RU
- 54. BINDING CONTEXT • $parent $context • $parentContext $data • $root templateOptions • $index • $element WWW.2GIS.RU
- 56. BINDINGS function initBalloon (options){ map.createBalloon({ point: options.point; content: options.template }); } 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
- 58.
- 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
- 61. KO.COMPUTED 1. Не наблюдайтеодин computed внутри другого Не меняйте observable внутри computed WWW.2GIS.RU
- 62. KO.COMPUTED 1. Не наблюдайтеодин computed внутри другого 2. Не меняйте observable внутри computed Используйте computed только там, где это необходимо WWW.2GIS.RU
- 63.
- 64.
- 65. PLUGINS knockout.address ko.linkObservableToUrl(vm.history, 'history'); window.location vm.myObservable 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
- 70. БОЛЬШИЕ ПРОЕКТЫ 200+ 107 22 18 Functions WWW.2GIS.RU
- 71. БОЛЬШИЕ ПРОЕКТЫ 13 200+ 107 22 18 WWW.2GIS.RU
- 72. БОЛЬШИЕ ПРОЕКТЫ Namespace.ViewModelModules.<ourModule> ={ _observables: { <ourObservable>: <defaultData>, <ourComputed>: function(){/*computedCode*/} }, <someProperty>: 100500, _initModule: function(){/*initCode*/}, <function>: function(){/*fBody*/}} 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
- 74. IDE data-bind=" //оченьмного //кода //который выглядит //как одна сплошная строка " WWW.2GIS.RU
- 75.
- 76.
- 77. АНАЛОГИ - AngularJS - Backbone.js - Ember.js - ExtJS - CorMVC - AsanaLuna - ... WWW.2GIS.RU
- 78.