Docstoc

KnockOutJS with ASP.NET MVC

Document Sample
KnockOutJS with ASP.NET MVC Powered By Docstoc
					KnockoutJS with
 ASP.NET MVC
    Part 1


  Learn More @ http://www.learnnowonline.com
     Copyright © by Application Developers Training Company
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
What’s KnockoutJS and why do I care?
• 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
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
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
3 Core Features of KnockoutJS
1. Observables and dependency tracking
2. Declarative bindings
3. Templating




            Learn More @ http://www.learnnowonline.com
               Copyright © by Application Developers Training Company
Model-View-View-Model (MVVM)
• MVVM: Design pattern for building user
  interfaces
• 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
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
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
Update KO and add Knockout.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
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
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
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
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
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
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
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

				
DOCUMENT INFO
Description: Learn what KnockOutJS it and how to get started.