Fundaments of Knockout js


Published on

In this presentation you will learn the basics of knockout and make a deep dive by building a chat app.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Fundaments of Knockout js

  1. 1. Fundamentals of Knockout JS 26 march 2014, Timisoara
  2. 2. Flavius-Radu Demian Software developer, Avaelgo I really like programming, web and mobile especially. Please feel free to ask questions any time and don’t be shy because Knowledge is power  | | @slowarad
  3. 3. Expectations Learn how the MVVM pattern works Learn the basics of Knockout JS Learn the advantages and limitations of Knockout JS => when to use it and when not to Understand that knockout want to be friends to everyone 
  4. 4. Expectations And the most important expectations is: Make you curious  => go home and try it and/or convince your PM at work in order for him to let you use it
  5. 5. Agenda The MVVM Pattern Welcome to Knockout Headline Features Bindings Templates Mapping and unmapping Navigation Testing Samples Conclusions
  6. 6. Whats is MVVM The Model-View-View Model (MVVM) pattern is a software architectural design pattern. This pattern emerged in 2005 to support the inherent data binding functionality offered by XAML subsystems such as WPF and Silverlight. Related patterns: MVC ( ex: asp .net mvc), MVP ( ex: windows forms) . MVVM ( ex: WPF, Silverlight) is based on MVC and it is a specialization of MVP. More explanations at this link.
  7. 7. What is MVVM - Model The Model encapsulates the domain model, business logic and may include data access. User { username, firstname, lastname, email }
  8. 8. What is MVVM - View The view is the application’s User Interface (UI). It defines the appearance of the UI and its visual elements and controls such as text boxes and buttons. The view may also implement view behavior such as animations and transitions.
  9. 9. What is MVVM - ViewModel The view model is responsible for holding application state, handling presentation logic and exposing application data and operations (commands) to the view such (ex: LoadCustomers). It acts as the intermediary ( glue) between the view and model. The view model retrieves data from the model and exposes it to the view as properties in a form that the view can easily digest.
  10. 10. MVVM Benefits As with other separation patterns such as MVC, MVVM facilitates the separation of concerns. The advantages of separating concerns in the MVVM manner include the facilitation of the following: Developer/Designer Collaboration without Conflict Testable Code Code Maintainability
  11. 11. 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.
  12. 12. Knockout JS Some teasers:
  13. 13. Headline features Elegant dependency tracking - automatically updates the right parts of your UI whenever your data model changes. Declarative bindings - a simple and obvious way to connect parts of your UI to your data model. You can construct a complex dynamic UIs easily using arbitrarily nested binding contexts. Trivially extensible - implement custom behaviors as new declarative bindings for easy reuse in just a few lines of code. Compact - around 13kb after gzipping
  14. 14. Headline features Pure JavaScript library - works with any server or client-side technology Can be added on top of your existing web application without requiring major architectural changes Works on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari, others) Open source Great community
  15. 15. Bindings Data-bind attributes in html ko.observable() for the properties ko.computed() for mixes between properties and/or strings ko.applyBindings() to activate bindings
  16. 16. Simple Binding Example <div data-bind=“text: message”></div> function viewModel () { this.message: ko.obersvable(“Hello World”); } ko.applyBindings(viewModel);
  17. 17. Bindings
  18. 18. Bindings Observable is a function ! Do not to this: viewModel.message = ‘hi’; Do this: viewModel.message(‘hi’);
  19. 19. Most used bindings Text Today's message is: <span data-bind="text: myMessage"></span> Value Today's message is: <input type=‘text’ data-bind=“value: myMessage“/> Html <div data-bind="html: news"></div>
  20. 20. Most used bindings Css <p data-bind="css: sendByMe == false ? 'bubbleLeft' : 'bubbleRight‘ ”></p> Style <p data-bind="style: { color: value < 0 ? 'red' : 'black' }"></p> Attr <a data-bind="attr: { href: url, title: title}">Custom Link</a>
  21. 21. Control Flow Bindings - foreach <ul data-bind="foreach: people“> <li> <p data-bind="text: firstName"></li> <li> <p data-bind="text: lastName"> </li> </ul> ko.applyBindings({ people: [ { firstName: 'Bert', lastName: 'Bertington' }, { firstName: 'Charles', lastName: 'Charlesforth' }] });
  22. 22. Control Flow Bindings - If <ul data-bind="foreach: planets"> <li>Planet: <b data-bind="text: name"> </b> <div data-bind="if: capital"> Capital: <b data-bind="text: capital.cityName"> </b></div> </li> </ul> ko.applyBindings({ planets: [ { name: 'Mercury', capital: null }, { name: 'Earth', capital: { cityName: 'Barnsley' } } ] });
  23. 23. Form Fields Bindings - click You've clicked <span data-bind="text: numberOfClicks"></span> times <button data-bind="click: incrementClickCounter">Click me</button> var viewModel = { numberOfClicks : ko.observable(0), incrementClickCounter : function() { var previousCount = this.numberOfClicks(); this.numberOfClicks(previousCount + 1); } };
  24. 24. Form Fields Bindings - event <div data-bind="event: { mouseover: showDetails, mouseout: hideDetails }"> Mouse over me </div> <div data-bind="visible: detailsShown "> Details </div> var viewModel = { detailsShown: ko.observable(false), showDetails: function() { this.detailsShown(true); }, hideDetails: function() { this.detailsShown(false); } };
  25. 25. Form Fields Bindings - submit <form data-bind="submit: doSomething"> ... form contents go here ... <button type="submit">Submit</button> </form> var viewModel = { doSomething : function(formElement) { // ... now do something } };
  26. 26. Form Fields Bindings - enable <p> <input type='checkbox' data-bind="checked: hasCellphone" /> <span> I have a cellphone </span> </p> <p> Your cellphone number: <input type='text' data-bind="value: cellNumber, enable: hasCellphone" /> </p> var viewModel = { hasCellphone : ko.observable(false), cellNumber: ko.observable(“”) };
  27. 27. Form Fields Bindings - hasFocus <input data-bind="hasFocus: isSelected" /> <span data-bind="visible: isSelected">The textbox has focus</span> var viewModel = { isSelected: ko.observable(false), setIsSelected: function() { this.isSelected(true) } };
  28. 28. Form Fields Bindings - checked <p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /> </p> var viewModel = { wantsSpam: ko.observable(true) // Initially checked }; // ... then later ... viewModel.wantsSpam(false); // The checkbox becomes unchecked
  29. 29. Form Fields Bindings – checked <div data-bind="visible: wantsSpam"> Preferred flavor of spam: <div> <input type="radio" name=“group" value="cherry" data-bind="checked: spamFlavor" /> Cherry </div> <div> <input type="radio" name=“group" value="almond" data-bind="checked: spamFlavor" /> Almond </div> </div> var viewModel = { wantsSpam: ko.observable(true), spamFlavor: ko.observable("almond") // selects only the Almond radio button }; viewModel.spamFlavor("cherry"); // Now only Cherry radio button is checked
  30. 30. Form Fields Bindings - options <span>Destination country: </span> <select data-bind="options: availableCountries"></select> var viewModel = { // These are the initial options availableCountries: ko.observableArray(['France', 'Spain']) }; // ... then later ... viewModel.availableCountries.push('China'); // Adds another option
  31. 31. Templates There are two main ways of using templates: native and string based Native templating is the mechanism that underpins foreach, if, with, and other control flow bindings. Internally, those control flow bindings capture the HTML markup contained in your element, and use it as a template to render against an arbitrary data item. This feature is built into Knockout and doesn’t require any external library.
  32. 32. Native named template example
  33. 33. Templates String-based templating is a way to connect Knockout to a third-party template engine. Knockout will pass your model values to the external template engine and inject the resulting markup string into your document.
  34. 34. String-based Templates Jquery.tmpl
  35. 35. Mapping All properties of an object are converted into an observable. If an update would change the value, it will update the observable. Arrays are converted into observable arrays. If an update would change the number of items, it will perform the appropriate add/remove actions var viewModel = ko.mapping.fromJS(data); // Every time data is received from the server: ko.mapping.fromJS(data, viewModel);
  36. 36. Unmapping If you want to convert your mapped object back to a regular JS object, use: var unmapped = ko.mapping.toJS(viewModel); The mapping and unmapping will also try to keep the order the same as the original JavaScript array/ observableArray.
  37. 37. Helpers ko.utils.arrayFirst ko.utils. arrayFilter ko.utils.arrayForEach ko.utils.arrayGetDistinctValues ko.utils.arrayIndexOf ko.utils.arrayPushAll ko.utils.unwrapObservable unshift – insert at the beggining, shift – removes the first element, reverse, sort, splice, slice and lots more…
  38. 38. Navigation You can implement navigation with Sammy JS ( for example)
  39. 39. Validation You can use Knockout Validation ( for example): Support for : required, min , max, minLenght, maxLenght, email, pattern, step, date, number, digit, date, equal, not eqal
  40. 40. Testing You can use Jasmine and Phantom JS ( for example): describe("Person Name", function() { it("computes fullName based on firstName and lastName", function() { var target = new PersonNameViewModel("Ada","Lovelace"); expect(target.fullName()).toBe("Ada Lovelace"); }); });
  41. 41. Let’s see some code My Demo 
  42. 42. Conclusions Elegant dependency tracking Declarative bindings Trivially extensible Pure JavaScript library Can be added on top of your existing web application Works on any mainstream browser Open source Great community Developer/Designer Collaboration without Conflict Testable Code
  43. 43. Thanks
  44. 44. More samples