Mastering KnockoutJS电子书

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