knockoutjs from scratch
TRANSCRIPT
Knockout from Scratch
Udayakumar Mathivanan
Powered By
Agenda
KnockoutJS
Demo & Examples
KnockoutJS
Javascript MVVM Library
Created by Steve Sanderson, Program Manager, Microsoft
Currently at version v3.2.0 (debug) — August 12th, 2014
http://knockoutjs.com/
Downloads: http://knockoutjs.com/downloads/
Knockout.js - IntroductionKnockout 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 maintainable.
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. 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.
Knockout.js – Additional BenefitsPure 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
Compact - around 13kb after gzipping
Works on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari, others)
Comprehensive suite of specifications (developed BDD-style) means its correct functioning can easily be verified on new browsers and platforms
Developers familiar with Ruby on Rails, ASP.NET MVC, or other MV* technologies may see MVVM as a real-time form of MVC with declarative syntax. In another sense, you can think of KO as a general way to make UIs for editing JSON data… whatever works for you :)
Knockout.js – Intended to compete with jQuery ?
Everyone loves jQuery! It’s an outstanding replacement for the clunky, inconsistent DOM API we had to put up with in the past.
jQuery is an excellent low-level way to manipulate elements and event handlers in a web page.
KO solves a different problem.
• As soon as your UI gets nontrivial and has a few overlapping behaviors, things can get tricky and expensive to maintain if you only use jQuery.
To summarise:
KO doesn’t compete with jQuery or similar low-level DOM APIs. KO provides a complementary, high-level way to link a data model to a UI. KO itself doesn’t depend on jQuery, but you can certainly use jQuery at the same time, and indeed that’s often useful if you want things like animated transitions.
KO Features. observable: This is used to define model properties. When these properties are bound with UI and when the value for these properties are updated, automatically the UI elements bound with these properties will be updated with the new value.
E.g. this.EmpName = ko.observable(“Uday”); - Here EmpName is the observable property. KO represent an object for the Knockout.js library.
The value of the observable is read as var data= this.EmpNo();
· observableArray: This represents a collection of data elements which required notifications. Typically this is used to bind with the List kind of elements.
E.g this.Employees = ko.observableArray([]);
· applyBindings: This is used to activate knockout for the current HTML document or a specific UI element in HTML document. The parameter for this method is the view-model which is defined in JavaScript. This ViewModel contains the observable, observableArray and various methods.
KO Features…contd
Various other types of binding
o click: Represents a click event handler added to the UI element so that JavaScript function is called.
o value: This represents the value binding with the UI element’s value property to the property defined into the ViewModel.
o visible: This is used to hide or unhide the UI element based upon the value passed to it’s binding.
o Text: This represent the text value of the parameter passed to the UI element.
How to use
Download Later version of KnockOut Js file
Reference the file using a <script> tag
<Script type=“text/javascript” src=“knockout-2.1.0.js”>
ViewModel
var newViewModel = {employeeName:’John’,employeeAge:28};
Using View Model inside a View
<span data-bind=“text: employeeName”></span>
<span data-bind=“text: employeeAge”></span>
Activating Knockout.js
Ko.applyBindings(newViewModel );
How KO knows when viewModel change?
Declare your model properties as Observables, because these are special JavaScript objects that can notify subscribers about changes, and can automatically detect dependencies
var newViewModel = {employeeName: ko.observable(‘Bob’),employeeAge: ko.observable(28)};
R/W observable properties
To read newViewModel()
To write newViewModel(“John”)
To write values to multiple observable properties newViewModel.employeeName(“John”).employeeAge(28)
So, when we write data-bind=“text: employeeName” the text binding registers itself to be notified when employeeName changes
Explicitly Subscribing to observables.subscribe() function
.dispose() function
Computed Observables
These are functions that are dependent on one or more other observables and will automatically update whenever there is a dependency change
function appViewModel()
{
this.firstName= ko.observable(“John”)
this.lastName= ko.observable(“Peter”)
this.fullName= ko.computed(function(){ return this.firstName()+this.lastName();},this);
}
Knockout built in Bindings
1. Controlling text and appearance
2. Control Flow
3. Working with Form fields
Knockout built in Bindings
Controlling text and appearance
The visible binding
The text binding
The html binding
The css binding
The style binding
The attr binding
Knockout Controlling flow
foreach binding
If binding
ifnot binding
with binding
Working with Form FieldsClick binding
Event binding
Submit binding
Enable binding
Disable binding
Value binding
hasFocus binding
Checked binding
Options binding
SelectedOptions binding
UniqueName binding
Allowing the default click action
By default knockout will prevent the click event from taking any default action, if default click action proceed just return true from click handler function
<div data-bind=“click: myDivHandler”>
<button data-bind=“click: myButtonHandler,clickBubble:false”>Click</button>
</div>
KnockoutJS
• Demo
• Basic Knockout Development
Technical Resources
• http://learn.knockoutjs.com
• https://github.com/dscape/knockout.js.samples
• https://www.codeschool.com/screencasts/knockout-js-part-1
