Download - Knockoutjs databinding
![Page 1: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/1.jpg)
Boulos Dib September 15, 2012
![Page 2: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/2.jpg)
MARQUEE SPONSOR
![Page 3: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/3.jpg)
PLATINUM SPONSOR
![Page 4: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/4.jpg)
PLATINUM SPONSOR
![Page 5: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/5.jpg)
PLATINUM SPONSOR
![Page 6: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/6.jpg)
GOLD SPONSORS
![Page 7: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/7.jpg)
SILVER SPONSORS
![Page 8: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/8.jpg)
Independent Consultant – Napeague Inc. First Commercial Personal Computer 1980 – TRS-80 Model III First Z80 based product (Protocol Adaptor For Citibank– 1984) First Commercial MS-DOS product (Telex/IBM PC, 50 Baud – 1985) Started Windows Development using 16-bit Win 3.x Used: 8080/Z80, 68xxx, PDP/RSX,VAX-VMS and x86 (C, C++, C#) User Group/Meetup Co-Organizer:
New York Pluralsight Study Group, XAML NYC
Other interests:
Windsurfing, Guitar Playing
![Page 9: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/9.jpg)
Introduction to Knockout & MVVM Built-in bindings Custom bindings Templates
![Page 10: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/10.jpg)
Simple development pattern.
MVVM, aka MVVC, sometimes MVC or MVP
Separation of concerns (Pattern)
Separates Model and UI
Separates Behavior and Structure
Popular with WPF & Silverlight developers.
Data Binding makes it easy to implement MVVM.
![Page 11: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/11.jpg)
Web Application
The 100K foot level view, Web Application Models, Controllers and Views
Views Models Controllers DB
Partial Views Routes Services Partial Views
Partial Views Code & Markup
Routes Routes Code
Services Services
Code
![Page 12: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/12.jpg)
Browser
The browser level view HTML/CSS – JavaScript - JSON
View HTML & CSS
Model JSON
ViewModel JavaScript
{a: b } var x; <h1>
![Page 13: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/13.jpg)
Javascript Library to simplify dynamic UIs with automatic refresh.
Core Concepts
Declarative Bindings
Dependency Tracking
Templates
Extensible
![Page 14: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/14.jpg)
If using ASP.NET MVC
NuGet Package Manager
Download
knockoutjs
jQuery
![Page 15: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/15.jpg)
Observable Computed Observable Observable Arrays Declarative bindings Template Support
![Page 16: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/16.jpg)
Create the Model
Retrieve Data: usually via Ajax or other form data retrieval (API, LocalStorage).
Create the ViewModel
Encapsulate UI behavior and data from model.
Create the View (HTML Markup)
<label data-bind=“text: name” />
Bind the ViewModel to the view
applyBindings(viewModel)
![Page 17: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/17.jpg)
First Name: <input type="text“ data-bind="value: firstName"/> Last Name: <input type="text" data-bind=“value: lastName" /> <span data-bind="text : firstName"></span> <input type="text" data-bind="value : lastName" />
var viewModel = { firstName: ko.observable("John"), lastName: ko.observable("Doe") }; ko.applyBindings(viewModel);
![Page 18: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/18.jpg)
var vm = { quantity: ko.observable(10), price: ko.observable(100), taxRate: ko.observable(8.75) }; viewModel = new vm(); viewModel.totalCost = ko.computed(function () { return (parseInt("0" + this.quantity(), 10) * this.price()) * this.taxRate();
}, viewModel); ko.applyBindings(viewModel);
![Page 19: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/19.jpg)
var viewModel = { States: ko.observableArray([ { State: "New York", Cities: ['New York City', 'East Hampton', 'Yonkers'] }, { State: "New Jersey", Cities: ['Jersey City', 'Hoboken', 'Maplewood'] }, { State: "Connecticut", Cities: ['Stamford', 'Greenwich'] }, { State: "Pennsylvania", Cities: ['Philadelphia'] }, ]), selectedState: ko.observable(), selectedCity: ko.observable() }; viewModel.selectionMade = ko.computed(function () { return (this.selectedState() && this.selectedCity()); }, viewModel); ko.applyBindings(viewModel);
![Page 20: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/20.jpg)
Type Description
visible Used to hide or show DOM elements
text Display text value in a DOM element
html Display html in a DOM element
css Add or remove CSS classes from DOM elements
style Apply specific style to a DOM Element
attr Set the value of any attribute on a DOM element
![Page 21: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/21.jpg)
binding Description
foreach Used for rendering lists based on array bindings.
If Conditional inclusion of markup and any related binding based on truthy condition
Ifnot Conditional inclusion of markup and any related binding based on a falsey condition
with Creates a new binding context changing what descendent element bind to.
![Page 22: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/22.jpg)
binding Description
click Add an event handler so a function is invoked when the associated DOM element is clicked.
event Add an event handler than can be bound to any event, such as keypress, mouseover or mouseout.
submit Event handler used when submitting forms.
enable Used to enable DOM elements only when the parameter value is true. Typically used with form elements like input, select, and textarea.
disable Opposite of enable. Used in the same way.
![Page 23: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/23.jpg)
binding Description
value Associates a DOM’s element value with a propery on the viewmodel.
hasfocus Two way binding for setting focus on an element and chekcing whether an element has focus.
checked This binding is used for checkable controls. Radio button or checkbox.
options Used to bind the elements of a drop-down list or multi-select list.
selectedOptions Bind to elements that are currently selected. Used with select and options bindings.
uniqueName Gives an element a unique name if it does not already have a name attribute.
![Page 24: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/24.jpg)
// Subscribe myViewModel.totalCost.subscribe(function(newValue) { alert(“Let’s check if we are above our budget" + newValue); }); // Dispose of subscription var subscriptionCost = myViewModel.totalCost.subscribe(function(newValue) { /* do some work */ }); // ...then later... subscriptionCost.dispose();
![Page 25: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/25.jpg)
Custom Bindings Plugins
TodoMVC
http://addyosmani.github.com/todomvc/
Knockbackjs
http://kmalakoff.github.com/knockback/
KnockoutMVC
http://knockoutmvc.com/
![Page 26: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/26.jpg)
Named Templates Anonymous Templates Inline External
![Page 27: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/27.jpg)
Register a binding by adding it as a subproperty of ko.bindingHandlers.
Need to supply two functions:
init
update
And then use it with DOM element bindings.
<div data-bind=“customBindingName: someValue"> </div>
![Page 28: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/28.jpg)
ko.bindingHandlers.customBindingName = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { // 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, allBindingsAccessor, VM) { // 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. } };
![Page 29: Knockoutjs databinding](https://reader033.vdocuments.site/reader033/viewer/2022052410/554f9208b4c9052a518b5418/html5/thumbnails/29.jpg)
Main Site (Steve Sanderson - Author)
http://knockoutjs.com
Ryan Niemeyer - Contributor
http://www.knockmeout.com