Your SlideShare is downloading. ×
0
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Knockout.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Knockout.js

913

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.

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
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
913
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Knockout.js Presenter: Ankit Kumar, Mindfire Solutions
  • 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. 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. 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. 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. 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. 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. 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. Presenter: Ankit Kumar, Mindfire Solutions MVVM (Model View ViewModel) App Data Interactive UI Data + UI operation
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Presenter: Ankit Kumar, Mindfire Solutions Server Side Interaction DEMO
  • 21. Presenter: Ankit Kumar, Mindfire Solutions Questions ?
  • 22. Presenter: Ankit Kumar, Mindfire Solutions Thank You

×