KnockOutJS with ASP.NET MVC

3,353 views

Published on

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
3,353
On SlideShare
0
From Embeds
0
Number of Embeds
1,245
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

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
  • KnockOutJS with ASP.NET MVC

    1. 1. KnockoutJS with ASP.NET MVC Part 1 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    2. 2. Overview Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    3. 3. Overview• What is KnockOutJS and why do I care? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    4. 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. 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. 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. 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. 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. 9. What’s KnockoutJS and why do Icare? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    10. 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. 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. 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. 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. 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. 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. 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. 17. What is KnockoutJS Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    18. 18. What is KnockoutJS• Declarative Bindings Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    19. 19. What is KnockoutJS• Declarative Bindings• Automatic UI Refresh Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    20. 20. What is KnockoutJS• Declarative Bindings• Automatic UI Refresh• Dependency Tracking Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    21. 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. 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. 23. What isn’t KnockOutJS Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    24. 24. What isn’t KnockOutJS• Not a replacement for jQuery Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    25. 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. 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. 27. 3 Core Features of Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    28. 28. 3 Core Features of1. Observables and dependency tracking Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    29. 29. 3 Core Features of1. Observables and dependency tracking2. Declarative bindings Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    30. 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. 31. Model-View-View-Model Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    32. 32. Model-View-View-ModelMVVM: Design pattern for building userinterfaces Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    33. 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. 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. 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. 36. Overview Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    37. 37. Overview• What is KnockOutJS and why do I care? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    38. 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. 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. 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. 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. 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. 43. Getting Started Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    44. 44. Getting Started• If using ASP.NET MVC 4 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    45. 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. 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. 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. 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. 49. Update KO and addKnockout.Mapping Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    50. 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. 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. 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. 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. 54. Overview Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    55. 55. Overview• What is KnockOutJS and why do I care? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    56. 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. 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. 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. 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. 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. 61. Observables Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    62. 62. Observables• One of the 3 cores of KnockoutJS Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    63. 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. 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. 65. Observables: Example Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    66. 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. 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. 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. 69. Computed Observables Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    70. 70. Computed Observables• Allows customizations to View Model fields Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    71. 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. 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. 73. Observable Arrays Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    74. 74. Observable Arrays• Used for a collection of items Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    75. 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. 76. Overview Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    77. 77. Overview• What is KnockOutJS and why do I care? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    78. 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. 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. 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. 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. 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. 83. Learn More! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    84. 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

    ×