Your SlideShare is downloading. ×
0
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
KnockOutJS with ASP.NET MVC
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

KnockOutJS with ASP.NET MVC

2,773

Published on

Learn what KnockOutJS it and how to get started. …

Learn what KnockOutJS it and how to get started.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,773
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • DEMO: rest of section\n
  • Transcript

    • 1. KnockoutJS with ASP.NET MVC Part 1 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 2. Overview Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 3. Overview• What is KnockOutJS and why do I care? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 4. Overview• What is KnockOutJS and why do I care?• Getting Started Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 5. Overview• What is KnockOutJS and why do I care?• Getting Started• Observables Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 6. Overview• What is KnockOutJS and why do I care?• Getting Started• Observables• Bindings Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 7. Overview• What is KnockOutJS and why do I care?• Getting Started• Observables• Bindings• Templating Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 8. Overview• What is KnockOutJS and why do I care?• Getting Started• Observables• Bindings• Templating• Customizing KnockOutJS Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 9. What’s KnockoutJS and why do Icare? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 10. What’s KnockoutJS and why do Icare?KnockoutJS (KO for short) allows: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 11. What’s KnockoutJS and why do Icare?KnockoutJS (KO for short) allows:• Rich, responsive user interfaces Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 12. What’s KnockoutJS and why do Icare?KnockoutJS (KO for short) allows:• Rich, responsive user interfaces• Dependency tracking Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 13. What’s KnockoutJS and why do Icare?KnockoutJS (KO for short) allows:• Rich, responsive user interfaces• Dependency tracking• Declarative Bindings Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 14. What’s KnockoutJS and why do Icare?KnockoutJS (KO for short) allows:• Rich, responsive user interfaces• Dependency tracking• Declarative Bindings• Self-contained JavaScript library (14Kb with gZip!) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 15. What’s KnockoutJS and why do Icare?KnockoutJS (KO for short) allows:• Rich, responsive user interfaces• Dependency tracking• Declarative Bindings• Self-contained JavaScript library (14Kb with gZip!)• Supports mainstream browsers (IE6+, FF 2+, Chrome, Safari and others) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 16. What’s KnockoutJS and why do Icare?KnockoutJS (KO for short) allows:• Rich, responsive user interfaces• Dependency tracking• Declarative Bindings• Self-contained JavaScript library (14Kb with gZip!)• Supports mainstream browsers (IE6+, FF 2+, Chrome, Safari and others)• MVVM for JSON data Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 17. What is KnockoutJS Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 18. What is KnockoutJS• Declarative Bindings Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 19. What is KnockoutJS• Declarative Bindings• Automatic UI Refresh Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 20. What is KnockoutJS• Declarative Bindings• Automatic UI Refresh• Dependency Tracking Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 21. What is KnockoutJS• Declarative Bindings• Automatic UI Refresh• Dependency Tracking• Templating Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 22. What is KnockoutJS• Declarative Bindings• Automatic UI Refresh• Dependency Tracking• Templating• No Dependencies! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 23. What isn’t KnockOutJS Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 24. What isn’t KnockOutJS• Not a replacement for jQuery Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 25. What isn’t KnockOutJS• Not a replacement for jQuery• Not a Prototype for JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 26. What isn’t KnockOutJS• Not a replacement for jQuery• Not a Prototype for JavaScript … <head> <script type=“text/javascript” src=“jquery.min.js” /> <script type=“text/javascript” src=“knockout.min.js” /> </head> … Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 27. 3 Core Features of Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 28. 3 Core Features of1. Observables and dependency tracking Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 29. 3 Core Features of1. Observables and dependency tracking2. Declarative bindings Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 30. 3 Core Features of1. Observables and dependency tracking2. Declarative bindings3. Templating Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 31. Model-View-View-Model Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 32. Model-View-View-ModelMVVM: Design pattern for building userinterfaces Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 33. Model-View-View-ModelMVVM: Design pattern for building userinterfaces• Model – Data of your application Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 34. Model-View-View-ModelMVVM: Design pattern for building userinterfaces• Model – Data of your application• View Model – Entity (field) structure of your data Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 35. Model-View-View-ModelMVVM: Design pattern for building userinterfaces• Model – Data of your application• View Model – Entity (field) structure of your data• View – UI that represents the View Model and the interactions within it Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 36. Overview Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 37. Overview• What is KnockOutJS and why do I care? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 38. Overview• What is KnockOutJS and why do I care?• Getting Started Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 39. Overview• What is KnockOutJS and why do I care?• Getting Started• Observables Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 40. Overview• What is KnockOutJS and why do I care?• Getting Started• Observables• Bindings Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 41. Overview• What is KnockOutJS and why do I care?• Getting Started• Observables• Bindings• Templating Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 42. Overview• What is KnockOutJS and why do I care?• Getting Started• Observables• Bindings• Templating• Customizing KnockOutJS Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 43. Getting Started Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 44. Getting Started• If using ASP.NET MVC 4 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 45. Getting Started• If using ASP.NET MVC 4 • Good news, it’s part of the template! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 46. Getting Started• If using ASP.NET MVC 4 • Good news, it’s part of the template! • Start a new MVC 4 project in Visual Studio Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 47. Getting Started• If using ASP.NET MVC 4 • Good news, it’s part of the template! • Start a new MVC 4 project in Visual Studio• If using some other technology Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 48. Getting Started• If using ASP.NET MVC 4 • Good news, it’s part of the template! • Start a new MVC 4 project in Visual Studio• If using some other technology • Download KO from http://knockoutjs.com Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 49. Update KO and addKnockout.Mapping Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 50. Update KO and addKnockout.Mapping• Knockout.mapping is an plugin to KO Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 51. Update KO and addKnockout.Mapping• Knockout.mapping is an plugin to KO• Need latest version of KO for items like $index Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 52. Update KO and addKnockout.Mapping• Knockout.mapping is an plugin to KO• Need latest version of KO for items like $index • https://github.com/SteveSanderson/knockout/downloads Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 53. Update KO and addKnockout.Mapping• Knockout.mapping is an plugin to KO• Need latest version of KO for items like $index • https://github.com/SteveSanderson/knockout/downloads In Visual Studio, open: Tools > Library Package Manager > Package Manager Console Type: Install-Package knockout.mapping Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 54. Overview Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 55. Overview• What is KnockOutJS and why do I care? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 56. Overview• What is KnockOutJS and why do I care?• Getting Started Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 57. Overview• What is KnockOutJS and why do I care?• Getting Started• Observables Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 58. Overview• What is KnockOutJS and why do I care?• Getting Started• Observables• Bindings Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 59. Overview• What is KnockOutJS and why do I care?• Getting Started• Observables• Bindings• Templating Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 60. Overview• What is KnockOutJS and why do I care?• Getting Started• Observables• Bindings• Templating• Customizing KnockOutJS Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 61. Observables Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 62. Observables• One of the 3 cores of KnockoutJS Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 63. Observables• One of the 3 cores of KnockoutJS• Allows reading and writing values Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 64. Observables• One of the 3 cores of KnockoutJS• Allows reading and writing values• Allows subscriptions (for notifying of a change) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 65. Observables: Example Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 66. Observables: Example• View Model in KO is easy, just declare your view model like the example below Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 67. Observables: Example• View Model in KO is easy, just declare your view model like the example below … var viewModel = { productName: ‘Widget’, productCat: ‘Other’ }; … Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 68. Observables: Example• View Model in KO is easy, just declare your view model like the example below … var viewModel = { productName: ‘Widget’, productCat: ‘Other’ }; … The product is <span data-bind=“text: productName”></span> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 69. Computed Observables Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 70. Computed Observables• Allows customizations to View Model fields Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 71. Computed Observables• Allows customizations to View Model fields function productsViewModel () { this.productName = ko.observable(‘Widget’); this.productModel = ko.observable(‘12345’); this.productDisplay = ko.computed(function() { return this.productName() + “ ( “ + this.productModel ()+ “ ) “; }, this); } Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 72. Computed Observables• Allows customizations to View Model fields function productsViewModel () { this.productName = ko.observable(‘Widget’); this.productModel = ko.observable(‘12345’); this.productDisplay = ko.computed(function() { return this.productName() + “ ( “ + this.productModel ()+ “ ) “; }, this); } The result is: Widget (12345) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 73. Observable Arrays Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 74. Observable Arrays• Used for a collection of items Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 75. Observable Arrays• Used for a collection of items var myArray = ko.observableArray ([ { name: “Windows”, category: “OS” }, { name: “Office”, category: “Application” } ]); Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 76. Overview Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 77. Overview• What is KnockOutJS and why do I care? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 78. Overview• What is KnockOutJS and why do I care?• Getting Started Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 79. Overview• What is KnockOutJS and why do I care?• Getting Started• Observables Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 80. Overview• What is KnockOutJS and why do I care?• Getting Started• Observables• Bindings Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 81. Overview• What is KnockOutJS and why do I care?• Getting Started• Observables• Bindings• Templating Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 82. Overview• What is KnockOutJS and why do I care?• Getting Started• Observables• Bindings• Templating• Customizing KnockOutJS Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 83. Learn More! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 84. Learn More!• This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

    ×