KnockoutJSData-bind your way to dynamic HTML UIs with clean, maintainable code

Le Knockout?

It gives structure to your JS code!

And it’s easy!

It’s data-binding for your HTML!

And, fine sir, what problems does it

solve?

DOM manipulation

Event handler soup

Mmmm hmmmm. Go on…

Knockout is awesome! Blah blah derp…

Declarative bindingsAutomatic UI refresh

Dependency tracking

Data templates

Cereal-eatin’ man says, show me the

codez!

knockout.GetToWork()

Let’s try out Declarative Bindings

Data binding is easy!

Derp! Yeah, so easy; it’s just the data-bind attribute

Let’s try out Automatic UI

Refresh

Automatic UI refresh is easy, too!

Oh, yeah, blah blah it’s just the ko.observable thingy!

Let’s try out Dependency Tracking

Dependency tracking is the derp!

You see, my dear, ko.dependentObservable lets you setup complex UI relationships and dependencies with ease.

Let’s try out Templating

Herp ‘a derp, templating is so

simple!

The template binding lets you to render UI for model data!

Demos look good…but does it work

in the real world?

1. Data binding

2. Auto UI Refresh

3. Dependency tracking

4. Data templates

RECAP

Thank you!(Hope this has helped!)

Try KnockoutJS for yourself, right in your web browser:

learn.knockoutjs.com