1 / 9

KnockoutJs and ASP.NET MVC

KnockoutJs and ASP.NET MVC. Get where you’re going. Roberto Hernández Managing Consultant Excella Consulting. Agenda. Who am I? What is KnockoutJs ? Concepts / Benefits? (1) Demo - Before there was Knockout! (2) Demo – KnockoutJs MVVM Pattern Observables Observable Arrays

gauri
Download Presentation

KnockoutJs and ASP.NET MVC

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. KnockoutJs and ASP.NET MVC Get where you’re going. Roberto HernándezManaging ConsultantExcella Consulting

  2. Agenda • Who am I? • What is KnockoutJs? Concepts / Benefits? • (1) Demo - Before there was Knockout! • (2) Demo – KnockoutJs • MVVM Pattern • Observables • Observable Arrays • Computed Observables (aka Dependent Observables) • Declarative Bindings • Templates • (3) Demo - Interacting with ASP.NET MVC 3.0

  3. What is KnockoutJs? • Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably. http://knockoutjs.com/

  4. Features (Key Concepts) • Declarative Bindings • Easily associate DOM elements with model data using a concise, readable syntax • Automatic UI Refresh • When your data model's state changes, your UI updates automatically • Dependency Tracking • Implicitly set up chains of relationships between model data, to transform and combine it • Templating • Quickly generate sophisticated, nested UIs as a function of your model data http://knockoutjs.com/

  5. Observer Pattern • Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically. http://en.wikipedia.org/wiki/Observer_pattern

  6. MVVM Pattern • Design pattern for building user interfaces. It describes how you can keep a potentially sophisticated UI simple by splitting it into three parts: • Model: your application’s stored data. This data represents objects and operations in your business domain are independent of the UI. • ViewModel: pure-code representation of the data and operations on a UI. For example, if you’re implementing a list editor, your view model would be an object holding a list of items, and exposing methods to add and remove items. • View: a visible, interactive UI representing the state of the view model. When using KO, your view is simply your HTML document with declarative bindings to link it to the view model. http://knockoutjs.com/

  7. Code, Code, Code  • Demos, Demos and more Demos.

  8. Resources • http://www.asp.net/mvc • http://www.knockoutjs.com • http://blog.stevensanderson.com/

  9. Thank You! • Blog: http://www.OverrideThis.com • Twitter: hernandezrobert • Email: • roberto.hernandez@excella.com • Code: • https://bitbucket.org/rhp_74/overridethis.knockoutjs

More Related