Mastering KnockoutJS

Table of Contents

Mastering KnockoutJS

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

A note on Knockout 3.2

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Knockout Essentials

The environment setup

Looking at the samples

JavaScript's compatibility

An overview of Knockout

Observables

Observable arrays

Computed observables

Writable computed observables

Pure computed observables

Manual subscriptions

Defining viewmodels

The this and self keywords

Problems with prototypes

Serializing viewmodels

The data-bind syntax

Binding with nested properties

Binding against functions

Binding with expressions

Binding with function expressions

Using parentheses in bindings

Debugging with ko.toJSON

Control flow bindings

The if binding

The with binding

The foreach binding

Template binding

Reusable templates

Recursive templates

Dynamic templates

Containerless control flow

Extenders

Simple extenders

Extenders with options

Extenders that replace the target

The Contacts List application

Overview

The contact model

The Contacts page viewmodel

A philosophical note on a model versus a viewmodel

Mock data service

The view

The edit form

Contacts list

Summary

2. Extending Knockout with Custom Binding Handlers

The data binding pattern

Components of a binding handler

Using custom binding handlers

Simple binding handlers

Animated binding handlers

Working with third-party controls

Modifying the DOM with bindings

Applying new bindings to new children elements

Applying accessors

Controlling the order of binding handlers

Advanced binding handlers

Binding complex data with charts

Dynamically adjusting the chart type

Exposing APIs through bindings

Binding contexts and descendant bindings

Controlling descendant bindings

Child binding contexts

Extending binding contexts

Setting a new $root context

Containerless syntax with custom bindings

Using the virtual elements API

Summary

3. Extending Knockout with Preprocessors and Providers

Binding the handler preprocessing

Creating preprocessors

The uppercase preprocessor

Wrapping existing bindings

Node preprocessors

Closing virtual template nodes

Supporting alternate syntaxes

Multiple syntaxes

Binding providers

Custom binding providers

Knockout punches

Embedded text bindings

Namespaced bindings

Dynamic namespaced bindings

Binding filters

Writing custom filters

Filters on other bindings

Adding additional preprocessors

Summary

4. Application Development with Components and Modules

RequireJS – AMD viewmodels

An overview of RequireJS

Asynchronous Module Definitions

Starting RequireJS

Configuration

Starting the app

The text plugin

Components

The basic component registration

Custom elements in IE 8 and higher

Template registration

The element ID

The element instance

An array of DOM nodes

Document fragments

HTML strings

Registering templates using the AMD module

The viewmodel registration

The constructor function

A singleton object

The factory function

Registering viewmodels using an AMD module

Registering AMD

Observing changes in component parameters

The component's life cycle

The component's disposal

Combining components with data bindings

Implementing a component loader

The default loader

Registering a custom loader

Registering custom elements

Loading components with custom configurations

Single Page Application (SPA) routing

An overview of SammyJS

Controlling the navigation

Creating page components

The edit page

The list page

Coordinating pages

Summary

5. Durandal – the Knockout Framework

An overview of the Durandal framework

Promises

Getting started

The composition system

The compose binding

Composition options

Module instance

Constructor

Module ID strings

Viewpath strings

Explicit models and views

Containerless composition

View locations

Using the router

Configuring the router

Route properties

Binding the router

Activating routes

Navigation – hash change versus push state

Controlling the navigation from JavaScript

Modal dialogs

Message boxes

Message box settings

Custom dialogs

An alternative method

The application's life cycle

The activation life cycle

Preparing viewmodels with activate

A note on the router's isNavigating property

Checking navigation with canDeactivate

Composition

Widgets

Creating a new widget

Using a widget

Modifying widgets with data-part attributes

Summary

6. Advanced Durandal

Publishing and subscribing

The events module

Subscribing to events

Unsubscribing from events

Raising events

Proxying events

Application events

Module-scoped events

Handling logins

Gated login

Anytime login

Responding to the user's login changes

Guarded routes

Advanced composition

View caching

Transitions

The templated mode

Child routers

Dynamic child routes

Custom modal dialogs

Replacing the default context

Using activators

Binding to plain JavaScript objects

Observable plugin setup

Subscribing and extending

Computed observables

Promises

Sample

Summary

7. Best Practices

Sticking to MVVM

The view and the viewmodel

Cluttering the viewmodel

Cluttering the view

Using service modules

Creating small modules

Writing unit tests

Singleton versus instance

Calling ko.applyBindings once (per root)

Performance concerns

Observable loops

Limit active bindings

Delegated events

Summary

8. Plugins and Other Knockout Libraries

Knockout Validation

Default validation rules

Configuring validation options

Validation binding handlers

Creating custom rules

Knockout Mapping

Updating the viewmodel

Unmapping

Mapping options

Using keys for array updates

Using create for the object construction

Controlling updates

Choosing which properties get mapped

Challenges

Knockout Kendo

KoGrid

Knockout Bootstrap

Knockout Switch-Case

Knockout Projections

Knockout-ES5

Browser support

Summary

9. Under the Hood

Dependency tracking

ko.dependencyDetection

Registering dependencies

Subscribing to dependencies

Subscribing to observable arrays

Standard array functions

The utility methods

The prototype chain

The ko.isObservable function

The binding expression parser

Knockout property writers

Applying bindings

Sorting binding handlers

Running the binding handlers

Templates

The template binding handler

The template engine

The ko.utils reference

Summary

Index

Mastering KnockoutJS

Mastering KnockoutJS

Copyright © 2014 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: November 2014

Production reference: 1191114

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78398-100-7

www.packtpub.com

Credits

Author

Timothy Moran

Reviewers

Michael Best

Peter Himschoot

Anders Malmgren

Viktor Nemes

Julia Rechkunova

Patrick Walters

Acquisition Editor

Reshma Raman

Content Development Editor

Manasi Pandire

Technical Editor

Humera Shaikh

Copy Editors

Shambhavi Pai

Stuti Srivastava

Project Coordinator

Leena Purkait

Proofreaders

Simran Bhogal

Ameesha Green

Paul Hindle

Indexer

Tejal Soni

Graphics

Sheetal Aute

Production Coordinator

Aparna Bhagat

Cover Work

Aparna Bhagat

About the Author

Timothy Moran has been working in the field of software for the last 4 years. He started with desktop development for .NET and moved on to web development for a variety of technologies. Timothy began using Knockout shortly after the release of Version 1.3 and has since used it in several projects personally and professionally. He also provides community support by answering questions on StackOverflow.

This is Timothy's first title.

About the Reviewers

Peter Himschoot works as a lead trainer and architect at U2U (www.u2u.net), which is a Microsoft-certified partner for learning solutions based in Brussels, Belgium.

He has a wide interest in software development, including web, Windows, TFS, and mobile applications. Over the last 10 years, he has trained thousands of developers and was involved in many web development projects as a software architect.

Anders Malmgren is a committed and driven solutions architect and senior consultant who enjoys working on customer-oriented projects. He has good experience in designing and developing customer-specific IT solutions in .NET and other technologies such as Knockout. He's passionate about continuous learning, reading blogs, and testing new technologies regularly. Anders is currently working at a prominent Agile IT software development company called Agero Ltd.

He's an active member of the community and tries to contribute as much as possible, either through his blog, GitHub, or StackOverflow. You can find him on his blog at andersmalmgren.com or on GitHub at github.com/AndersMalmgren.

Viktor Nemes has been working as a professional software developer since 2008. He lives in Hungary and currently works at TechTalk. He is a full stack developer who is constantly going back and forth from the depth of databases through the world of services to client-side tinkering with the UI. He mainly deals with .NET and C# and builds various applications ranging from rich clients using WPF/Silverlight to web applications using different versions of the ASP.NET MVC.

He likes to play with other development stacks such as Ruby and Node.js and with JavaScript in general. His love for the MVVM pattern started in WPF and found its new home in browsers with the help of KnockoutJS.

When he is not spending his spare time with his family, he loves to chase virtual points on sites such as StackOverflow, CodeEval, Kongregate, or anywhere he can find interesting puzzles to solve.

Julia Rechkunova is a software engineer who is inspired by web development and design. She has over 4 years of experience and focuses on the quality and usability of web applications. She enjoys working as a frontend and backend developer. Modern web technologies and tools are the best instruments that help her build great applications and make the world better. She graduated with a Master's degree in Computer Science, started working as an HTML5 game developer, and then participated in startups. She has a passion for frontend programming and contributes to open source projects. Currently, she works with technologies such as HTML5, CSS3, JavaScript, Node.js, and other popular frameworks. Julia also likes to create new tools that bring something different to the industry.

Patrick Walters is a software enthusiast who has been actively developing various software since a very young age, and he enjoys doing so professionally. He has worn many hats in his career and loves the creative aspect of developing and teaching others.

He has been actively developing KnockoutJS applications for several years and enjoys writing about them and other open source technologies on his blog at patrickwalters.net; he can also be found on Twitter at @pwkad.

www.PacktPub.com

Support files, eBooks, discount offers, and more

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www2.packtpub.com/books/subscription/packtlib

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.

Why subscribe?

Fully searchable across every book published by Packt

Copy and paste, print, and bookmark content

On demand and accessible via a web browser

Free access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access.

Preface

Knockout is built around a pattern that started in Microsoft. This model is Model-View-ViewModel (MVVM), and I think introducing this pattern to newcomers is one of the biggest obstacles to wider adoption. Nearly every other JavaScript library or framework, along with most server-side frameworks, has been built around the Model-View-Controller (MVC) pattern, and the differences between the two are sometimes confusing, even for experienced developers. This problem is compounded by the fact that some larger frameworks, such as AngularJS, end up with a pattern that is nearly identical to MVVM.

Knockout's documentation is excellent, and its live examples and interactive tutorials are some of the best. When it comes to organizing full applications, though, more explanation is required. When I started writing this book, there was only one book on Knockout on Amazon, and it didn't have very favorable reviews. It seemed like a complete guide to using Knockout as the central piece of a frontend stack was missing.

I have been using Knockout for 3 years now, and I've been an active member of the community on StackOverflow and GitHub for 2 years. I've used Knockout in several professional applications as well as a dozen or so personal projects. It is, by far, my favorite JavaScript library, and I strongly prefer MVVM over MVC for developing client applications. Hopefully, you feel that this book gives you everything you need in order to be successful with Knockout.

A note on Knockout 3.2

Knockout 3.2 was released while this book was being written. Chapter 4, Application Development with Components and Modules, was rewritten to include the components feature, and some minor changes were made to other chapters in order to make them accurate. However, most of the code samples were written against Knockout 3.1, and so they do not take advantage of pure computed observables or other features that were released in Knockout 3.2.

What this book covers

Chapter 1, Knockout Essentials, covers the environment setup and basic use of the Knockout library. It also covers data binding, observables, binding handlers, and extenders, and demonstrates a simple Knockout Contacts List application.

Chapter 2, Extending Knockout with Custom Binding Handlers, gives you in-depth knowledge of how to create and use custom binding handlers. It includes simple single-property binding handlers as well as complex multiproperty binding handlers with templates.

Chapter 3, Extending Knockout with Preprocessors and Providers, teaches you how to use node and binding preprocessors and binding providers to customize Knockout's syntax. It also explores the Knockout Punches library.

Chapter 4, Application Development with Components and Modules, explains how to use RequireJS Asynchronous Module Definitions (AMDs) with Knockout to create organized, modular viewmodels. It also teaches you how to use the new Knockout components feature and how to continue working with the Contacts List demo application.

Chapter 5, Durandal – the Knockout Framework, explores the basics of the Knockout-based Durandal framework. This chapter covers composition, routing, modal dialogs, and custom widgets.

Chapter 6, Advanced Durandal, continues looking at the use of the Durandal framework. This chapter covers events, advanced composition, nested routers, custom dialogs, and the observable plugin.

Chapter 7, Best Practices, takes a deep dive into the inner workings of Knockout. It includes dependency detection and the publish/subscribe implementation, observable inheritance, the template engine, and a complete Knockout utility (ko.utils) reference.

Chapter 8, Plugins and Other Knockout Libraries, gives you an overview of the recommended patterns and practices for Knockout developers.

Chapter 9, Under the Hood, covers several popular Knockout plugins, including Knockout validation, Knockout mapping, and the new Knockout-ES5 plugin.

What you need for this book

You need an ES5-compatible browser, Git, and Node.js. The code in this book will run on any operating system.

Who this book is for

If you are an experienced JavaScript developer who is looking for new tools to build web applications and gain an understanding of core elements and applications, this is the book for you. It is assumed that you have basic knowledge of DOM, JavaScript, and KnockoutJS.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: All the code needed to start each chapter can be found in a branch named cp[chapter#]-[sample].

A block of code is set as follows:

var subtotal = ko.observable(0);

var tax = ko.observable(0.05);

var total = ko.computed(function() {

  var subtotal = parseFloat(self.subtotal()),

  tax = parseFloat(self.tax());

  return subtotal * (1 + tax);

});

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: You might have noticed in the previous section that when the Contacts page view model communicated with the data service, it wasn't dealing with JSON, but real JavaScript objects.

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <feedback@packtpub.com>, and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Additionally, the code for this book is part of a Git repository, which is available on GitHub at https://github.com/tyrsius/MasteringKnockout. The code samples are organized as branches in the repository.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <copyright@packtpub.com> with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at <questions@packtpub.com> if you are having a problem with any aspect of the book, and we will do our best to address it.

Chapter 1. Knockout Essentials

Though it is expected that you have experience with both JavaScript and KnockoutJS, we will still be covering the basics to establish a common foundation. This book wouldn't be complete if we didn't cover at least the basics. After that, we will look at building a simple application to create and manage contact information. This application will be used throughout the book to explore new techniques in Knockout and see how they fit into the larger process of application development. In this chapter, you will learn how to:

Define viewmodels

Write standard bindings

Use extenders

Use templates

Put all these pieces together into a functional application

This covers most of the standard functionalities in Knockout. In the next chapter, we will look at creating our own bindings to extend Knockout.

Even if you have used Knockout before and don't think you need a refresher, I encourage you to at least read the section that covers the Contacts List application example. It's something we will be using throughout the book as we explore more advanced concepts.

Before we get started, let's get our development environment set up.

The environment setup

We will be using a simple Node.js server to host our application because it will run on any operating system. If you haven't done so, install Node.js by following the instructions at http://nodejs.org/download.

We will be using Git to manage the code for each chapter. If you haven't done so, install Git by following the instructions at http://git-scm.com/book/en/Getting-Started-Installing-Git. The code for this book can be downloaded from http://www.packtpub.com. All the code needed to start each chapter can be found in a branch named cp[chapter#]-[sample]. For example, the first sample we will look at is going to be in the cp1-computeds branch.

To begin, clone the repository from https://github.com/tyrsius/MasteringKnockout. You can either use the provided download links or run the following command:

git clone git@github.com:tyrsius/MasteringKnockout

Then, check out the first sample using:

git checkout cp1

All the examples follow the same pattern. At the root is a server.js file that contains a boilerplate Node.js server. Inside the client directory is all the code for the application. To run the application, run this from the command line:

node server.js

Keep the command-line window open else the server will stop running. Then, open your web browser and navigate to http://localhost:3000. If you've set up your environment correctly, you should be looking at the empty Contacts List application, as shown in the following screenshot: