Submit Search
Upload
Knockoutjs UG meeting presentation
•
Download as PPTX, PDF
•
1 like
•
658 views
Valdis Iljuconoks
Follow
Presentation of march Latvian .Net User Group meeting in Riga.
Read less
Read more
Technology
Business
Report
Share
Report
Share
1 of 41
Download now
Recommended
jQuery secrets
jQuery secrets
Bastian Feder
AngularJS $Provide Service
AngularJS $Provide Service
Eyal Vardi
Backbone.js
Backbone.js
Knoldus Inc.
AngularJS - $http & $resource Services
AngularJS - $http & $resource Services
Eyal Vardi
jQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a Tree
adamlogic
Big Data for each one of us
Big Data for each one of us
OSCON Byrum
Optimizing Angular Performance in Enterprise Single Page Apps
Optimizing Angular Performance in Enterprise Single Page Apps
Morgan Stone
Pengenalan blaast platform sdk
Pengenalan blaast platform sdk
Arief Bayu Purwanto
Recommended
jQuery secrets
jQuery secrets
Bastian Feder
AngularJS $Provide Service
AngularJS $Provide Service
Eyal Vardi
Backbone.js
Backbone.js
Knoldus Inc.
AngularJS - $http & $resource Services
AngularJS - $http & $resource Services
Eyal Vardi
jQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a Tree
adamlogic
Big Data for each one of us
Big Data for each one of us
OSCON Byrum
Optimizing Angular Performance in Enterprise Single Page Apps
Optimizing Angular Performance in Enterprise Single Page Apps
Morgan Stone
Pengenalan blaast platform sdk
Pengenalan blaast platform sdk
Arief Bayu Purwanto
AngularJS Compile Process
AngularJS Compile Process
Eyal Vardi
Special Events
Special Events
Brandon Aaron
jQuery Foot-Gun Features
jQuery Foot-Gun Features
dmethvin
AngularJS Routing
AngularJS Routing
Eyal Vardi
AngularJS Services
AngularJS Services
Eyal Vardi
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
pootsbook
Taming that client side mess with Backbone.js
Taming that client side mess with Backbone.js
Jarod Ferguson
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
Robert Nyman
Backbone js
Backbone js
husnara mohammad
Special Events: Beyond Custom Events
Special Events: Beyond Custom Events
Brandon Aaron
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Dan Wahlin
Before there was Hoop Dreams, there was McDonald's: Strange and Beautiful
Before there was Hoop Dreams, there was McDonald's: Strange and Beautiful
chicagonewsonlineradio
Backbone Basics with Examples
Backbone Basics with Examples
Sergey Bolshchikov
jQuery
jQuery
Andrew Homeyer
The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript'...
The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript'...
Ben Teese
Nodejs do teste de unidade ao de integração
Nodejs do teste de unidade ao de integração
Vinícius Pretto da Silva
Angular 2.0 forms
Angular 2.0 forms
Eyal Vardi
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
Robert Nyman
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
Robert Nyman
Building Single Page Apps with Backbone.js, Coffeescript and Rails 3.1
Building Single Page Apps with Backbone.js, Coffeescript and Rails 3.1
Vagmi Mudumbai
HONEYMOON IN VENICE(mandolin) Mézeshetek Velencében
HONEYMOON IN VENICE(mandolin) Mézeshetek Velencében
DIO GYULA
INDIAN LOVE CALL Indián szerelmi dal
INDIAN LOVE CALL Indián szerelmi dal
DIO GYULA
More Related Content
What's hot
AngularJS Compile Process
AngularJS Compile Process
Eyal Vardi
Special Events
Special Events
Brandon Aaron
jQuery Foot-Gun Features
jQuery Foot-Gun Features
dmethvin
AngularJS Routing
AngularJS Routing
Eyal Vardi
AngularJS Services
AngularJS Services
Eyal Vardi
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
pootsbook
Taming that client side mess with Backbone.js
Taming that client side mess with Backbone.js
Jarod Ferguson
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
Robert Nyman
Backbone js
Backbone js
husnara mohammad
Special Events: Beyond Custom Events
Special Events: Beyond Custom Events
Brandon Aaron
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Dan Wahlin
Before there was Hoop Dreams, there was McDonald's: Strange and Beautiful
Before there was Hoop Dreams, there was McDonald's: Strange and Beautiful
chicagonewsonlineradio
Backbone Basics with Examples
Backbone Basics with Examples
Sergey Bolshchikov
jQuery
jQuery
Andrew Homeyer
The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript'...
The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript'...
Ben Teese
Nodejs do teste de unidade ao de integração
Nodejs do teste de unidade ao de integração
Vinícius Pretto da Silva
Angular 2.0 forms
Angular 2.0 forms
Eyal Vardi
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
Robert Nyman
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
Robert Nyman
Building Single Page Apps with Backbone.js, Coffeescript and Rails 3.1
Building Single Page Apps with Backbone.js, Coffeescript and Rails 3.1
Vagmi Mudumbai
What's hot
(20)
AngularJS Compile Process
AngularJS Compile Process
Special Events
Special Events
jQuery Foot-Gun Features
jQuery Foot-Gun Features
AngularJS Routing
AngularJS Routing
AngularJS Services
AngularJS Services
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
Taming that client side mess with Backbone.js
Taming that client side mess with Backbone.js
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
Backbone js
Backbone js
Special Events: Beyond Custom Events
Special Events: Beyond Custom Events
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Before there was Hoop Dreams, there was McDonald's: Strange and Beautiful
Before there was Hoop Dreams, there was McDonald's: Strange and Beautiful
Backbone Basics with Examples
Backbone Basics with Examples
jQuery
jQuery
The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript'...
The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript'...
Nodejs do teste de unidade ao de integração
Nodejs do teste de unidade ao de integração
Angular 2.0 forms
Angular 2.0 forms
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
JavaScript APIs - The Web is the Platform - MDN Hack Day, Santiago, Chile
Building Single Page Apps with Backbone.js, Coffeescript and Rails 3.1
Building Single Page Apps with Backbone.js, Coffeescript and Rails 3.1
Viewers also liked
HONEYMOON IN VENICE(mandolin) Mézeshetek Velencében
HONEYMOON IN VENICE(mandolin) Mézeshetek Velencében
DIO GYULA
INDIAN LOVE CALL Indián szerelmi dal
INDIAN LOVE CALL Indián szerelmi dal
DIO GYULA
CSharp 5 Async
CSharp 5 Async
Valdis Iljuconoks
Client side development with knockout.js
Client side development with knockout.js
Valdis Iljuconoks
Loving data with F#
Loving data with F#
Valdis Iljuconoks
Lap around Visual Studio 2013
Lap around Visual Studio 2013
Valdis Iljuconoks
Parallel Development in VS10
Parallel Development in VS10
Valdis Iljuconoks
Parallel development in VS 2012
Parallel development in VS 2012
Valdis Iljuconoks
Viewers also liked
(8)
HONEYMOON IN VENICE(mandolin) Mézeshetek Velencében
HONEYMOON IN VENICE(mandolin) Mézeshetek Velencében
INDIAN LOVE CALL Indián szerelmi dal
INDIAN LOVE CALL Indián szerelmi dal
CSharp 5 Async
CSharp 5 Async
Client side development with knockout.js
Client side development with knockout.js
Loving data with F#
Loving data with F#
Lap around Visual Studio 2013
Lap around Visual Studio 2013
Parallel Development in VS10
Parallel Development in VS10
Parallel development in VS 2012
Parallel development in VS 2012
Similar to Knockoutjs UG meeting presentation
jQuery
jQuery
Ivano Malavolta
jQuery Rescue Adventure
jQuery Rescue Adventure
Allegient
Understanding backbonejs
Understanding backbonejs
Nick Lee
JQuery Flot
JQuery Flot
Arshavski Alexander
The rise and fall of a techno DJ, plus more new reviews and notable screenings
The rise and fall of a techno DJ, plus more new reviews and notable screenings
chicagonewsyesterday
Scala on Your Phone
Scala on Your Phone
Michael Galpin
mobl presentation @ IHomer
mobl presentation @ IHomer
zefhemel
Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com Backbone
Rafael Felix da Silva
Clean Javascript
Clean Javascript
Ryunosuke SATO
mobl
mobl
zefhemel
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Sebastian Pożoga
Kick start with j query
Kick start with j query
Md. Ziaul Haq
Backbone js
Backbone js
Knoldus Inc.
JQuery introduction
JQuery introduction
Pradeep Saraswathi
international PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secrets
smueller_sandsmedia
How te bring common UI patterns to ADF
How te bring common UI patterns to ADF
Getting value from IoT, Integration and Data Analytics
Discontinuing Reader Matches
Discontinuing Reader Matches
chicagonewsonlineradio
ScalikeJDBC Tutorial for Beginners
ScalikeJDBC Tutorial for Beginners
Kazuhiro Sera
jQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and Performance
Jonas De Smet
Javascript first-class citizenery
Javascript first-class citizenery
toddbr
Similar to Knockoutjs UG meeting presentation
(20)
jQuery
jQuery
jQuery Rescue Adventure
jQuery Rescue Adventure
Understanding backbonejs
Understanding backbonejs
JQuery Flot
JQuery Flot
The rise and fall of a techno DJ, plus more new reviews and notable screenings
The rise and fall of a techno DJ, plus more new reviews and notable screenings
Scala on Your Phone
Scala on Your Phone
mobl presentation @ IHomer
mobl presentation @ IHomer
Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com Backbone
Clean Javascript
Clean Javascript
mobl
mobl
Game jump: frontend introduction #1
Game jump: frontend introduction #1
Kick start with j query
Kick start with j query
Backbone js
Backbone js
JQuery introduction
JQuery introduction
international PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secrets
How te bring common UI patterns to ADF
How te bring common UI patterns to ADF
Discontinuing Reader Matches
Discontinuing Reader Matches
ScalikeJDBC Tutorial for Beginners
ScalikeJDBC Tutorial for Beginners
jQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and Performance
Javascript first-class citizenery
Javascript first-class citizenery
Recently uploaded
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
Evaluating the top large language models.pdf
Evaluating the top large language models.pdf
ChristopherTHyatt
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Enterprise Knowledge
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Recently uploaded
(20)
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Evaluating the top large language models.pdf
Evaluating the top large language models.pdf
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Knockoutjs UG meeting presentation
1.
www.dotnet.lv
2.
Valdis Iljuconoks Software Architect Microsoft
MVP Geta Latvia, Viiar Consulting valdis.iljuconoks@dotnet.lv http://dotnet.lv/blogs/vi
3.
knockout.js
4.
$(function () {
$("#btn").click(function () { $.getJSON("/api/customers").then(function (customers) { $.each(customers, function () { $("<li>").text(this.FirstName + " " + this.LastName).appendTo("#customers"); }); }); }); });
5.
$(function () {
$("#btn").click(function () { $.getJSON("/api/customers").then(function (customers) { var html = tmpl("cust_tmpl", { customers: customers }); $("#customers").html(html); }); }); }); <script type="text/html" id="cust_tmpl"> {{each customers}} <li><a href="/api/customer/${Id}">${FirstName} ${LastName}</a></li> {{/each}} </script>
6.
Observables Bindings
Utilities Data features Plug-ins
7.
Observables
8.
Observable
Observable Array Dependent Observables (Computed)
9.
// read value var
val = viewmodel.name(); // set value viewmodel.name(“Valdis”) Observables Functions (not all browsers support getters and setters)
10.
viewmodel.customers = ko.obserableArray(); viewmodel.customers.push(new
customer()); Observable Array Use with collections Detect changes only within an array Use knockout array methods (cross-browser)
11.
indexOf(item)
slice(2, 4) push(item) pop() unshift(item) shift() reverse() sort() remove(item) removeAll()
12.
viewmodel.fullname = ko.computed(function()
{ return this.name() + “ ” + this.surname(); }) Dependent Observables (Computed) “this” keyword has to be managed
13.
Observables Bindings
Utilities Data features Plug-ins
14.
Bindings
15.
Built-in Bindings Custom bindings
16.
Built-in Bindings
17.
data-bind=“”
value: html: text: css: style: visible: template: …
18.
Control-flow bindings
19.
data-bind=“” foreach:
if: ifnot: with: …
20.
Custom bindings (most powerful
extension point)
21.
Event binding
22.
addOnEnter: function(model, event)
{ var keycode = (event.which ? event.which : event.keyCode); if (keycode === 13) { viewModel.addTCustomer(); } return true; } data-bind=“event: {keypress: addOnEnter}”
23.
ko.bindingHandlers.yourBindingName = {
init: update: } Custom bindings Define your own behavior
24.
ko.bindingHandlers.executeOnEnter = {
init: function(element, valueAccessor, allBindingAccessor, viewModel) { var value = valueAccessor(); $(element).keypress(function(event) { var keycode = (event.which ? event.which : event.keyCode); if (keycode === 13) { value.call(viewModel); return false; } return true; }); } }; data-bind=“executeOnEnter: addCustomer”
25.
Observables Bindings
Utilities Data features Plug-ins
26.
Utilities
27.
ko.utils.arrayFilter()
28.
ko.utils.arrayFilter()
ko.utils.arrayFirst() ko.utils.arrayForEach() ko.utils.arrayIndexOf() ko.utils.arrayMap() ko.utils.compareArrays() ko.utils.unwrapObservable() …
29.
Observables Bindings
Utilities Data features Plug-ins
30.
Data features
31.
ko.toJS() ko.toJSON()
32.
Observables Bindings
Utilities Data features Plug-ins
33.
Plug-ins
34.
ko.mapping.*
35.
Observables Bindings
Utilities Data features Plug-ins
36.
Resources
37.
knockoutjs.com
blog.stevensanderson.com knockmeout.com stackoverflow.com -> “knockoutjs” groups.google.com -> “knockoutjs”
38.
must have to
build interactive UI
39.
?
40.
Valdis Iljuconoks Software Architect Microsoft
MVP Geta Latvia, Viiar Consulting valdis.iljuconoks@dotnet.lv http://dotnet.lv/blogs/vi
41.
www.dotnet.lv
Download now