An introduction to Knockout.js

Emanuele Delbono@emadb

Everyone loves jumping in muddy puddles

Everyone loves jumping in muddy puddleswriting javascript code

We write tons of javascript code

I am

Web Developer in CodicePlastico. I have fun writing web apps in C#, Javascript and Ruby.

Agenda

• The MVVM Pattern

• Welcome to Knockout

• Binding basics

• The features

• Conclusions

Presentation patterns

The MVVM pattern

Model ViewModel View

ViewModel has methods too!

What is Knockoutjs?

“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 [...], KO can help you implement it more simply and maintainably.”

http://knockoutjs.com

Key features

• Declarative binding

• Automatic UI refresh

• Templating

• Dependency tracking

Bidirectional Data Binding

ViewModel View

Binding

• data-bind attributes in HTML

• ko.observable() for the properties

• ko.applyBindings() to activate bindings

Binding

var viewModel = { message: ko.observable('Welcome')}

<div data-bind="text: message"></div>

Observable is a function!

Don’t do this:

viewModel.message = 'hi'

Do this:

viewModel.message('hi')

Code time

Recap

• Simple binding

• Array binding

• Computed properties

• Event binding

• Conditionals

• Templates

• Subscriptions

• Messagging

• Contexts

• Custom bindings

• Virtual elements

Conclusions

• KO is small focused on binding

• Very low learning curve

• Focused on databinding (no routing, model synchronization, etc...)

• Lots documentation

• Could be hard on big pages

https://github.com/emadb/jsday13