Scribd Logo
Upload

Welcome to Scribd!

  • KnockOutJS With ASP - NET MVC

    Uploaded by

    Craig
    20 views17 pages
    Learn what KnockOutJS it and how to get started.

    Original Title

    KnockOutJS with ASP.NET MVC

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Learn what KnockOutJS it and how to get started.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    20 views17 pages

    KnockOutJS With ASP - NET MVC

    Uploaded by

    Craig
    Learn what KnockOutJS it and how to get started.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 17

    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

    Whats 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 isnt 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, its 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

    You might also like