Knockoutjs databinding

Boulos Dib September 15, 2012

MARQUEE SPONSOR

PLATINUM SPONSOR

PLATINUM SPONSOR

PLATINUM SPONSOR

GOLD SPONSORS

SILVER SPONSORS

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

Introduction to Knockout & MVVM Built-in bindings Custom bindings Templates

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.

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

Browser

The browser level view HTML/CSS – JavaScript - JSON

View HTML & CSS

Model JSON

ViewModel JavaScript

{a: b } var x; <h1>

Javascript Library to simplify dynamic UIs with automatic refresh.

Core Concepts

Declarative Bindings

Dependency Tracking

Templates

Extensible

If using ASP.NET MVC

NuGet Package Manager

Download

knockoutjs

jQuery

Observable Computed Observable Observable Arrays Declarative bindings Template Support

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)

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);

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);

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);

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

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.

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.

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.

// 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();

Custom Bindings Plugins

TodoMVC

http://addyosmani.github.com/todomvc/

Knockbackjs

http://kmalakoff.github.com/knockback/

KnockoutMVC

http://knockoutmvc.com/

Named Templates Anonymous Templates Inline External

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>

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. } };

Main Site (Steve Sanderson - Author)

http://knockoutjs.com

Ryan Niemeyer - Contributor

http://www.knockmeout.com

Contact:

http://blog.boulosdib.com

@boulosdib