Knockout.js

1,243 views

Published on

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.

Published in: Technology

Knockout.js

  1. 1. Knockout.js Presenter: Ankit Kumar, Mindfire Solutions
  2. 2. Presenter: Ankit Kumar, Mindfire Solutions Agenda  Introduction  Key Concepts  Introduction to MVVM  Getting started  Observables  Bindings – Control Flow – Control over text and appearance – Working with form fields Interaction with Server-Side Technology Demo
  3. 3. Introduction 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 Presenter: Ankit Kumar, Mindfire Solutions
  4. 4. Presenter: Ankit Kumar, Mindfire Solutions Introduction History: Steve Sanderson Open Source Pure JavaScript library (works with multiple technology) Can be added on top of your existing web application Compact (13kb approx) Multiple Browser (IE 6+, Firefox 2+, Chrome, Safari, others) Solves: Rich interactivity & dynamic updates
  5. 5. Presenter: Ankit Kumar, Mindfire Solutions Key Concepts Declarative Binding: Easily associate DOM elements with model data using a concise, readable syntax Automatic UI refreshes: When your data model's state changes, your UI updates automatically
  6. 6. Presenter: Ankit Kumar, Mindfire Solutions Key Concepts Declarative Binding: Easily associate DOM elements with model data using a concise, readable syntax Automatic UI refreshes: When your data model's state changes, your UI updates automatically
  7. 7. Presenter: Ankit Kumar, Mindfire Solutions Key Concepts Dependency Tracking: Implicitly set up chains of relationships between model data, to transform and combine it. We are taking about “Observables” Templating: Quickly generate sophisticated, nested UIs as a function of your model data
  8. 8. Presenter: Ankit Kumar, Mindfire Solutions MVVM (Model View ViewModel) Model: objects and operations in your business domain and is independent of any UI View: interactive UI representing the state of the view model. It displays information from the view model, sends commands to the view model (e.g. clicks events), and updates whenever the state of the view model changes. ViewModel: pure-code representation of the data and operations on a UI. e.g, for a list editor, view model would be an object holding a list of items, and exposing methods to add and remove items
  9. 9. Presenter: Ankit Kumar, Mindfire Solutions MVVM (Model View ViewModel) App Data Interactive UI Data + UI operation
  10. 10. Presenter: Ankit Kumar, Mindfire Solutions Getting started What all we need ??? Knockout.js And Jquery (if we need some Jquery animation/UI) Hello World using Knockout(Demo)
  11. 11. Presenter: Ankit Kumar, Mindfire Solutions Observables Knockout provides 2 way binding. This is achieved using observables. var myViewModel = { firstName: ko.observable('Mindfire'), lastName: ko.observable('Solutions') }; Read: myViewModel.personName() Write: myViewModel.PersonName('Ltd')
  12. 12. Presenter: Ankit Kumar, Mindfire Solutions Computed Observables Computed Observables are very helpful when you want to do some operation over observables. var myViewModel = { this.firstName: ko.observable('Mindfire'), this.lastName: ko.observable('Solutions') this.fullName = ko.computed(function() { return this.firstName() + " " + this.lastName(); }, this); }; Now we can use “fullName” to bind values
  13. 13. Presenter: Ankit Kumar, Mindfire Solutions Observables Array Helps in detecting and responding to changes of a collection of things. var myObservableArray = ko.observableArray(); myObservableArray.push('Some value'); //push some value var anotherObservableArray = ko.observableArray([ { name: "Bungle", type: "Bear" }, { name: "George", type: "Hippo" }, { name: "Zippy", type: "Unknown" } ]); Read: myObservableArray().length MyObservableArray()[0] //gives 1st element
  14. 14. Presenter: Ankit Kumar, Mindfire Solutions Observables Array Functions myObservableArray.push('Some new value') - adds a new item to the end of array myObservableArray.pop() - removes the last value from the array and returns it myObservableArray.unshift('Some new value') - inserts a new item at the beginning of the array myObservableArray.shift() - removes the first value from the array and returns it myObservableArray.reverse() - reverses the order of the array myObservableArray.sort() - sorts the array contents.
  15. 15. Presenter: Ankit Kumar, Mindfire Solutions Observables Array Functions myObservableArray.remove(someItem) - removes all values that equal someItem myObservableArray.remove(function(item) { return item.age < 18 }) removes all values whose age property is less than 18, and returns them as an array myObservableArray.removeAll(['Chad', 132, undefined]) removes all values that equal 'Chad', 123, or undefined and returns them as an array myObservableArray.removeAll() removes all values and returns them as an array
  16. 16. Presenter: Ankit Kumar, Mindfire Solutions Bindings For Controlling Text and Appearance we have – Visible binding – Text binding – Html binding – Css binding – Style binding – Attr binding Will see these in Demo
  17. 17. Presenter: Ankit Kumar, Mindfire Solutions Bindings for control flow For Control flow we have – foreach binding – if binding – ifnot binding – with binding Will see these in Demo
  18. 18. Presenter: Ankit Kumar, Mindfire Solutions Binding Events Click binding Event binding Submit binding Enable/disable binding Value binding HasFocus Binding Checked Binding Options binding Selected binding Unique binding
  19. 19. Presenter: Ankit Kumar, Mindfire Solutions Templates The template binding populates the associated DOM element with the results of rendering a template. – Native templating is the mechanism that underpins foreach, if, with, and other control flow bindings – String-based templating is a way to connect Knockout to a third-party template engine.
  20. 20. Presenter: Ankit Kumar, Mindfire Solutions Server Side Interaction DEMO
  21. 21. Presenter: Ankit Kumar, Mindfire Solutions Questions ?
  22. 22. Presenter: Ankit Kumar, Mindfire Solutions Thank You

×