Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Nish Anil, profile picture
Uploaded byNish Anil
852 views

Building databound JavaScript apps with Knockoutjs

The document introduces Model-View-ViewModel (MVVM) and how it can be implemented using KnockoutJS in JavaScript applications. It discusses how KnockoutJS uses observables to establish two-way bindings between the view and view model layers. The document provides an example of building a simple customer management application with KnockoutJS and demonstrates how bindings update the view when observables change. It also discusses how KnockoutJS can be used to create enterprise dashboards with HTML5, jQuery, and Ignite UI controls.

Technology◦
Building Databound JavaScript Apps with KnockoutJS Jason Beres Sr VP, Developer Tools, Infragistics @jasonberes / jasonb@Infragistics.com Nishanth Anil Technical Evangelist, Infragistics @nishanil Tom Puglisi Technical Evangelist, Infragistics tomp@Infragistics.com
• Introduction to MVVM • MVVM in WPF – recap! • MVVM in JavaScript • Enterprise dashboards using HTML5/jQuery • Q&A Agenda
Intro to MVVM
The MVVM Pattern • Model-View View-Model • Software architectural design pattern • Emerged in the 2005 timeframe to support the declarative data binding features of WPF / XAML
Benefits • Developer/Designer Collaboration without Conflict - Since the UI is void of any non-visual code such as business logic, the team’s designer can confidently work on modifying the code without worrying about breaking the programmer’s code. • Testable Code - Decoupling the view from the view model enables us to write clean unit tests. • Code Maintainability - Testable, decoupled code is easier to maintain. A bug can be found much more easily if there is only one place to inspect.
WPF/SL MVVM Demo
JavaScript then, now, & forever!
JavaScript MV* F/Ws
MVVM in JavaScript
Introducing KnockoutJS • Knockout is an open source JavaScript library that enables MVVM applications by implementing binding • Properties in the Model classes are of type ko.observable • Observables in JavaScript notify subscribers of property changes • Supports all major browsers 6+ 2+
Comparing JavaScript to WPF Runtime CLR - XAML Binding Business Logic C# Presentation XAML Window Runtime Browser - Knockout Business Logic JS Presentation HTML Page
Step 1: Reference KO in the View <script type="text/javascript" src="../scripts/ko/knockout- 2.1.0.js"></script>
Step 2: Associate the View Model with the View <script> $(document).ready(function () { // Instantiate the CustomerViewModel model and apply bindings var customerViewModel = new CustomerViewModel(); ko.applyBindings(customerViewModel);}); </script>
Step 3: Define Declarative Bindings in the View <div id="ListMenu" > <ul data-bind="foreach: customers"> <div> <img width='100' height='100' align='middle' style='padding:5px' data-bind="attr: { src: pictureURL }"></img> <a style='font-size:15pt;cursor:pointer;color:#067EBF' data-bind="text: fullName "></a> </div> </ul> </div>
Understanding Bindings • Bindings are declared in the visual element mark-up by using the data-bind attribute. • These bindings are associated with view model properties that are known as observables. • Observables are properties that will automatically issue notifications whenever their value changes. function CustomerViewModel() { var self = this; // Properties self.customers = ko.observableArray();
Knockout Bindings • foreach: Lets you iterate through a loop and apply the same markup to each item in the list. This is used to render the to-do lists and to-do items. Within the foreach, the bindings are applied to the elements of the list. • visible: Used to toggle visibility. Hide markup when a collection is empty, or make the error message visible. • value: Used to populate form values. • click: Binds a click event to a function on the view model.
Knockout & jQuery • Not a jQuery competitor, Knockout solves a different problem! • Will work together!
KnockoutJS Demo
Enterprise dashboards using HTML5/jQuery?
The World’s Most Adva JavaScript & HTML5 UI Framework
Cross-Platform Web Development Build standards-based, touch-enabled HTML5 & jQuery experiences for desktop, tablet & mobile delivery, including multi-device targeting with frameworks like PhoneGap and MVC. • HTML5, CSS3, jQuery based toolkit • Pure Client-Side Performance • jQuery Core + jQuery Mobile Library • Theme Roller + CSS3 Support • Touch Everywhere • Support for MVC2, MVC3, MVC4 KnockOutJS • Flat, Hierachical, OLAP Pivot Grids • High performance charting controls • Geospatial mapping • Mobile UI controls, Adaptive CSS
Demo: Ignite UI – KnockoutJS
Resources • Knockout & MVVM Step by Step - http://www.developer- tech.com/news/2012/dec/13/knockoutjs-mvvm-framework-jquery-developers/ • Building Enterprise dashboards in Ignite UI - http://www.infragistics.com/products/jquery
Thank You! Jason Beres Sr VP, Developer Tools, Infragistics @jasonberes / jasonb@Infragistics.com Nishanth Anil Technical Evangelist, Infragistics @nishanil