KnockoutJS with ASP.NET MVC    Part 1   Learn More @ http://www.learnnowonline.com      Copyright © by Application Develop...
Overview       Learn More @ http://www.learnnowonline.com           Copyright © by Application Developers Training Company
Overview• What is KnockOutJS and why do I care?           Learn More @ http://www.learnnowonline.com              Copyrigh...
Overview• What is KnockOutJS and why do I care?• Getting Started           Learn More @ http://www.learnnowonline.com     ...
Overview• What is KnockOutJS and why do I care?• Getting Started• Observables           Learn More @ http://www.learnnowon...
Overview•   What is KnockOutJS and why do I care?•   Getting Started•   Observables•   Bindings             Learn More @ h...
Overview•   What is KnockOutJS and why do I care?•   Getting Started•   Observables•   Bindings•   Templating             ...
Overview•   What is KnockOutJS and why do I care?•   Getting Started•   Observables•   Bindings•   Templating•   Customizi...
What’s KnockoutJS and why do Icare?        Learn More @ http://www.learnnowonline.com           Copyright © by Application...
What’s KnockoutJS and why do Icare?KnockoutJS (KO for short) allows:           Learn More @ http://www.learnnowonline.com ...
What’s KnockoutJS and why do Icare?KnockoutJS (KO for short) allows:• Rich, responsive user interfaces            Learn Mo...
What’s KnockoutJS and why do Icare?KnockoutJS (KO for short) allows:• Rich, responsive user interfaces• Dependency trackin...
What’s KnockoutJS and why do Icare?KnockoutJS (KO for short) allows:• Rich, responsive user interfaces• Dependency trackin...
What’s KnockoutJS and why do Icare?KnockoutJS (KO for short) allows:• Rich, responsive user interfaces• Dependency trackin...
What’s KnockoutJS and why do Icare?KnockoutJS (KO for short) allows:• Rich, responsive user interfaces• Dependency trackin...
What’s KnockoutJS and why do Icare?KnockoutJS (KO for short) allows:• Rich, responsive user interfaces• Dependency trackin...
What is KnockoutJS       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Trainin...
What is KnockoutJS• Declarative Bindings           Learn More @ http://www.learnnowonline.com              Copyright © by ...
What is KnockoutJS• Declarative Bindings• Automatic UI Refresh           Learn More @ http://www.learnnowonline.com       ...
What is KnockoutJS• Declarative Bindings• Automatic UI Refresh• Dependency Tracking          Learn More @ http://www.learn...
What is KnockoutJS•   Declarative Bindings•   Automatic UI Refresh•   Dependency Tracking•   Templating            Learn M...
What is KnockoutJS•   Declarative Bindings•   Automatic UI Refresh•   Dependency Tracking•   Templating•   No Dependencies...
What isn’t KnockOutJS       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Trai...
What isn’t KnockOutJS• Not a replacement for jQuery           Learn More @ http://www.learnnowonline.com              Copy...
What isn’t KnockOutJS• Not a replacement for jQuery• Not a Prototype for JavaScript           Learn More @ http://www.lear...
What isn’t KnockOutJS• Not a replacement for jQuery• Not a Prototype for JavaScript  …   <head>     <script type=“text/jav...
3 Core Features of        Learn More @ http://www.learnnowonline.com           Copyright © by Application Developers Train...
3 Core Features of1. Observables and dependency tracking          Learn More @ http://www.learnnowonline.com             C...
3 Core Features of1. Observables and dependency tracking2. Declarative bindings          Learn More @ http://www.learnnowo...
3 Core Features of1. Observables and dependency tracking2. Declarative bindings3. Templating          Learn More @ http://...
Model-View-View-Model      Learn More @ http://www.learnnowonline.com         Copyright © by Application Developers Traini...
Model-View-View-ModelMVVM: Design pattern for building userinterfaces          Learn More @ http://www.learnnowonline.com ...
Model-View-View-ModelMVVM: Design pattern for building userinterfaces• Model – Data of your application          Learn Mor...
Model-View-View-ModelMVVM: Design pattern for building userinterfaces• Model – Data of your application• View Model – Enti...
Model-View-View-ModelMVVM: Design pattern for building userinterfaces• Model – Data of your application• View Model – Enti...
Overview       Learn More @ http://www.learnnowonline.com           Copyright © by Application Developers Training Company
Overview• What is KnockOutJS and why do I care?           Learn More @ http://www.learnnowonline.com              Copyrigh...
Overview• What is KnockOutJS and why do I care?• Getting Started           Learn More @ http://www.learnnowonline.com     ...
Overview• What is KnockOutJS and why do I care?• Getting Started• Observables           Learn More @ http://www.learnnowon...
Overview•   What is KnockOutJS and why do I care?•   Getting Started•   Observables•   Bindings             Learn More @ h...
Overview•   What is KnockOutJS and why do I care?•   Getting Started•   Observables•   Bindings•   Templating             ...
Overview•   What is KnockOutJS and why do I care?•   Getting Started•   Observables•   Bindings•   Templating•   Customizi...
Getting Started        Learn More @ http://www.learnnowonline.com           Copyright © by Application Developers Training...
Getting Started• If using ASP.NET MVC 4          Learn More @ http://www.learnnowonline.com             Copyright © by App...
Getting Started• If using ASP.NET MVC 4  • Good news, it’s part of the template!            Learn More @ http://www.learnn...
Getting Started• If using ASP.NET MVC 4  • Good news, it’s part of the template!  • Start a new MVC 4 project in Visual St...
Getting Started• If using ASP.NET MVC 4  • Good news, it’s part of the template!  • Start a new MVC 4 project in Visual St...
Getting Started• If using ASP.NET MVC 4  • Good news, it’s part of the template!  • Start a new MVC 4 project in Visual St...
Update KO and addKnockout.Mapping        Learn More @ http://www.learnnowonline.com           Copyright © by Application D...
Update KO and addKnockout.Mapping• Knockout.mapping is an plugin to KO          Learn More @ http://www.learnnowonline.com...
Update KO and addKnockout.Mapping• Knockout.mapping is an plugin to KO• Need latest version of KO for items like  $index  ...
Update KO and addKnockout.Mapping• Knockout.mapping is an plugin to KO• Need latest version of KO for items like  $index  ...
Update KO and addKnockout.Mapping• Knockout.mapping is an plugin to KO• Need latest version of KO for items like  $index  ...
Overview       Learn More @ http://www.learnnowonline.com           Copyright © by Application Developers Training Company
Overview• What is KnockOutJS and why do I care?           Learn More @ http://www.learnnowonline.com              Copyrigh...
Overview• What is KnockOutJS and why do I care?• Getting Started           Learn More @ http://www.learnnowonline.com     ...
Overview• What is KnockOutJS and why do I care?• Getting Started• Observables           Learn More @ http://www.learnnowon...
Overview•   What is KnockOutJS and why do I care?•   Getting Started•   Observables•   Bindings             Learn More @ h...
Overview•   What is KnockOutJS and why do I care?•   Getting Started•   Observables•   Bindings•   Templating             ...
Overview•   What is KnockOutJS and why do I care?•   Getting Started•   Observables•   Bindings•   Templating•   Customizi...
Observables       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Company
Observables• One of the 3 cores of KnockoutJS           Learn More @ http://www.learnnowonline.com              Copyright ...
Observables• One of the 3 cores of KnockoutJS• Allows reading and writing values           Learn More @ http://www.learnno...
Observables• One of the 3 cores of KnockoutJS• Allows reading and writing values• Allows subscriptions (for notifying of a...
Observables: Example       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Train...
Observables: Example• View Model in KO is easy, just declare  your view model like the example  below           Learn More...
Observables: Example• View Model in KO is easy, just declare  your view model like the example  below  …  var viewModel = ...
Observables: Example• View Model in KO is easy, just declare  your view model like the example  below  …  var viewModel = ...
Computed Observables       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Train...
Computed Observables• Allows customizations to View Model  fields          Learn More @ http://www.learnnowonline.com      ...
Computed Observables• Allows customizations to View Model  fields  function productsViewModel () {    this.productName = ko...
Computed Observables• Allows customizations to View Model  fields  function productsViewModel () {    this.productName = ko...
Observable Arrays       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training...
Observable Arrays• Used for a collection of items           Learn More @ http://www.learnnowonline.com              Copyri...
Observable Arrays• Used for a collection of items  var myArray = ko.observableArray ([     { name: “Windows”, category: “O...
Overview       Learn More @ http://www.learnnowonline.com           Copyright © by Application Developers Training Company
Overview• What is KnockOutJS and why do I care?           Learn More @ http://www.learnnowonline.com              Copyrigh...
Overview• What is KnockOutJS and why do I care?• Getting Started           Learn More @ http://www.learnnowonline.com     ...
Overview• What is KnockOutJS and why do I care?• Getting Started• Observables           Learn More @ http://www.learnnowon...
Overview•   What is KnockOutJS and why do I care?•   Getting Started•   Observables•   Bindings             Learn More @ h...
Overview•   What is KnockOutJS and why do I care?•   Getting Started•   Observables•   Bindings•   Templating             ...
Overview•   What is KnockOutJS and why do I care?•   Getting Started•   Observables•   Bindings•   Templating•   Customizi...
Learn More!       Learn More @ http://www.learnnowonline.com          Copyright © by Application Developers Training Company
Learn More!• This is an excerpt from a larger course. Visit  www.learnnowonline.com for the full details!           Learn ...
Upcoming SlideShare
Loading in...5
×

KnockOutJS with ASP.NET MVC

2,795

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
2,795
On Slideshare
0
From Embeds
0
Number of Embeds
7
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
  • Transcript of "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

    ×