1. Another look at Knockout JS By Peter Messenger Senior Developer – Triple Point Technology http://www.petermessenger.com

2. What is Knockout JS? 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.

3. Knockout JS - Site Developed originally by Steve Sanderson – http://blog.stevensanderson.com/about/ http://blog.stevensanderson.com/about/ – Microsoft employee, working in England Open Source Framework Available on Github, Nuget In active development, currently version 3.0 More Information on – http://knockoutjs.com/

4. Simple Example Javascript: var myViewModel = {firstName: ‘Peter', lastName: ‘Messenger’}; Html : The name is Javascript : ko.applyBindings(myViewModel); Result: The name is Peter

5. Why is this important? Based on the MVVM design pattern – MVVM stands for Model, View, ViewModel A model: your application’s stored data. A view model: a pure-code representation of the data and operations on a UI A view: a visible, interactive UI representing the state of the view model. – Keeps the logic and presentation layer separated – Much easier to maintain, less prone to error

6. Extending Example - Observables Javascript: var myViewModel = {firstName: ko.observable(‘Peter‘), lastName: ko.observable(‘Messenger’)}; Result: Exactly the same as before, but…. If personName changes for any reason, the display will automatically change. Extending myViewModel.firstName.subscribe(function(newValue) { alert("The person's new name is " + newValue); });

7. Extending Example - Computed Javascript: function Person(firstName,lastName) { this.firstName = ko.observable(firstName); this.lastName = ko.observable(lastName); this.fullName = ko.computed(function() { return this.firstName() + " " + this.lastName(); }, this); } var myViewModel = Person(“Peter”,”Messenger”); Result: Exactly the same as before, but…. Can bind to fullName, and this will change, if first name or last name change

8. Extending Examples - Arrays Javascript: var myViewModel = {people : ko.observableArray()}; myViewModel.people.push(Person(“Peter”,”Messenger”)); myViewModel.people.push(Person(“John”,”Smith”)); myViewModel.people.push(Person(“Sarah”,”Parker”)); Html: First name Last name

9. Extending Example - Actions Javascript: function PeopleModel() { var self = this; self.people = ko.observableArray([ Person(“Peter”,”Messenger”), Person(“John”,”Smith”), Person(“Sarah”,”Parker”) ]); self.addPerson = function() { self.people.push(Person(“New Guy”,"New at " + new Date())); }; self.removePerson = function() { self.people.remove(this); }

10. Extending Example – Actions (cont) Html: People Name at position : Remove Add Example Here $index is used to mark the position in the array $parent allows it to jump back a level, $parent can be nested $parent[2] is parent of parent http://knockoutjs.com/documentation/foreach-binding.html

11. Existing Bindings Text and appearance Visible, text, html, css, style, attr Control flow Foreach, if, ifnot, with Forms Click, Event, Submit, Enable, Disable, HasFocus, Checked, Options, SelectedOptions

12. Building your own bindings Javascript ko.bindingHandlers.yourBindingName = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { // This will be called when the binding is first applied to an element // Set up any initial state, event handlers, etc. here }, update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { // This will be called once when the binding is first applied to an element, // and again whenever the associated observable changes value. // Update the DOM element based on the supplied values here. } }; Html

13. Wiring up to services (Jquery) Get $.getJSON("/some/url", function(data) { }) Post var data = /* Your data in JSON format - see below */; $.post("/some/url", data, function(returnedData) { // This callback is executed if the post was successful }) Converting var jsonData = ko.toJSON(viewModel);

14. More documentation There is extensive documentation on the main site – Interactive tutorials – Live examples – Forum – Easy to integrate with JSON based services As the popularity of knockout has increased, many o the javascript UI frameworks have added knockout extensions.

15. Added in Version 3.0 Clearer error reporting Custom binding, now extensible Bindings now independent and only refresh when needed Computed variables now only notify when they are changed Performance and bug fixes

16. Integration – Other Frameworks Kendo UI (Telerik) – http://rniemeyer.github.io/knockout-kendo/ http://rniemeyer.github.io/knockout-kendo/ JQuery UI – http://gvas.github.io/knockout-jqueryui/index.html http://gvas.github.io/knockout-jqueryui/index.html jqWidgets – http://www.jqwidgets.com/ http://www.jqwidgets.com/ Wijmo (Component One) – http://wijmo.com/demo/explore/?widget=Knockout& sample=Overview http://wijmo.com/demo/explore/?widget=Knockout& sample=Overview

17. jQuery UI Examples http://gvas.github.io/knockout-jqueryui/index.html Accordion AutoComplete Button Dialog Menu

18. Why do I like it? Once you get the hang of it, it is quite easy and nice to use and debuggable Can develop “single page” websites that are fast and responsive Very lean, much less “post back bloat” than MVC Can have html/javascript separate, easier to style with css

19. A full website based on Knockout JS https://www.petermessenger.com/Exercises.aspx

20. Important Links? Presentation slides on my website and blog – http://www.petermessenger.com http://www.petermessenger.com – Main Site: Main Site: http://knockoutjs.com/ – Good Reference Site: http://www.knockmeout.net/