You are previewing Mastering KnockoutJS.
O'Reilly logo
Mastering KnockoutJS

Book Description

Use and extend Knockout to deliver feature-rich, modern web applications

In Detail

Knockout is a standalone JavaScript implementation of the Model-View-ViewModel (MVVM) pattern with templates.

Mastering KnockoutJS will guide you through web application development with the Knockout library. Starting with covering the basics of KnockoutJS, you will learn how to add new behaviors with custom bindings and preprocessors. Then you will get to see how to make reusable components and organize modules in larger web applications.

This book will teach you how to use a declarative syntax for creating user interfaces that automatically sync with the changing data. You will also learn to organize applications with the MVVM pattern, which helps you stay organized and simplifies the process of continued product growth.

Finally, you will cover popular open source plugins such as Knockout punches and Durandal to see what is possible with Knockout's extensible API.

What You Will Learn

  • Add custom binding handlers to extend functionality
  • Customize binding syntax using preprocessors and binding providers
  • Build reusable controls with the web components system, new to Knockout 3.2
  • Organize viewmodels and modules in real web applications
  • Use Durandal to create fully-featured Single Page Applications (SPA)
  • Explore Knockout's source code with detailed explanations to update the UI dynamically
  • Create full web applications using binding preprocessors, node preprocessors, and the Knockout Punches library
  • Customize Knockout to add functionality and integrate with third-party libraries
  • Downloading the example code for this book. 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.

    Table of Contents

    1. Mastering KnockoutJS
      1. Table of Contents
      2. Mastering KnockoutJS
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      7. Preface
        1. A note on Knockout 3.2
        2. What this book covers
        3. What you need for this book
        4. Who this book is for
        5. Conventions
        6. Reader feedback
        7. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 1. Knockout Essentials
        1. The environment setup
          1. Looking at the samples
          2. JavaScript's compatibility
        2. An overview of Knockout
        3. Observables
          1. Observable arrays
          2. Computed observables
            1. Writable computed observables
            2. Pure computed observables
          3. Manual subscriptions
        4. Defining viewmodels
          1. The this and self keywords
          2. Problems with prototypes
          3. Serializing viewmodels
        5. The data-bind syntax
          1. Binding with nested properties
          2. Binding against functions
          3. Binding with expressions
          4. Binding with function expressions
          5. Using parentheses in bindings
          6. Debugging with ko.toJSON
        6. Control flow bindings
          1. The if binding
          2. The with binding
          3. The foreach binding
        7. Template binding
          1. Reusable templates
          2. Recursive templates
          3. Dynamic templates
        8. Containerless control flow
        9. Extenders
          1. Simple extenders
          2. Extenders with options
          3. Extenders that replace the target
        10. The Contacts List application
          1. Overview
          2. The contact model
          3. The Contacts page viewmodel
            1. A philosophical note on a model versus a viewmodel
          4. Mock data service
          5. The view
            1. The edit form
            2. Contacts list
        11. Summary
      9. 2. Extending Knockout with Custom Binding Handlers
        1. The data binding pattern
        2. Components of a binding handler
          1. Using custom binding handlers
        3. Simple binding handlers
          1. Animated binding handlers
          2. Working with third-party controls
          3. Modifying the DOM with bindings
          4. Applying new bindings to new children elements
            1. Applying accessors
          5. Controlling the order of binding handlers
        4. Advanced binding handlers
          1. Binding complex data with charts
            1. Dynamically adjusting the chart type
          2. Exposing APIs through bindings
          3. Binding contexts and descendant bindings
            1. Controlling descendant bindings
            2. Child binding contexts
            3. Extending binding contexts
            4. Setting a new $root context
        5. Containerless syntax with custom bindings
          1. Using the virtual elements API
        6. Summary
      10. 3. Extending Knockout with Preprocessors and Providers
        1. Binding the handler preprocessing
          1. Creating preprocessors
          2. The uppercase preprocessor
          3. Wrapping existing bindings
        2. Node preprocessors
          1. Closing virtual template nodes
          2. Supporting alternate syntaxes
            1. Multiple syntaxes
        3. Binding providers
          1. Custom binding providers
        4. Knockout punches
          1. Embedded text bindings
          2. Namespaced bindings
            1. Dynamic namespaced bindings
          3. Binding filters
            1. Writing custom filters
            2. Filters on other bindings
          4. Adding additional preprocessors
        5. Summary
      11. 4. Application Development with Components and Modules
        1. RequireJS – AMD viewmodels
          1. An overview of RequireJS
          2. Asynchronous Module Definitions
          3. Starting RequireJS
          4. Configuration
          5. Starting the app
          6. The text plugin
        2. Components
          1. The basic component registration
            1. Custom elements in IE 8 and higher
          2. Template registration
            1. The element ID
            2. The element instance
            3. An array of DOM nodes
            4. Document fragments
            5. HTML strings
            6. Registering templates using the AMD module
          3. The viewmodel registration
            1. The constructor function
            2. A singleton object
            3. The factory function
            4. Registering viewmodels using an AMD module
          4. Registering AMD
          5. Observing changes in component parameters
          6. The component's life cycle
          7. The component's disposal
          8. Combining components with data bindings
          9. Implementing a component loader
          10. The default loader
          11. Registering a custom loader
          12. Registering custom elements
          13. Loading components with custom configurations
        3. Single Page Application (SPA) routing
          1. An overview of SammyJS
          2. Controlling the navigation
          3. Creating page components
            1. The edit page
            2. The list page
          4. Coordinating pages
        4. Summary
      12. 5. Durandal – the Knockout Framework
        1. An overview of the Durandal framework
          1. Promises
          2. Getting started
        2. The composition system
          1. The compose binding
          2. Composition options
            1. Module instance
            2. Constructor
            3. Module ID strings
            4. Viewpath strings
            5. Explicit models and views
            6. Containerless composition
          3. View locations
        3. Using the router
          1. Configuring the router
          2. Route properties
          3. Binding the router
          4. Activating routes
          5. Navigation – hash change versus push state
          6. Controlling the navigation from JavaScript
        4. Modal dialogs
          1. Message boxes
            1. Message box settings
          2. Custom dialogs
            1. An alternative method
        5. The application's life cycle
          1. The activation life cycle
            1. Preparing viewmodels with activate
            2. A note on the router's isNavigating property
            3. Checking navigation with canDeactivate
          2. Composition
        6. Widgets
          1. Creating a new widget
          2. Using a widget
          3. Modifying widgets with data-part attributes
        7. Summary
      13. 6. Advanced Durandal
        1. Publishing and subscribing
          1. The events module
            1. Subscribing to events
              1. Unsubscribing from events
            2. Raising events
            3. Proxying events
          2. Application events
          3. Module-scoped events
        2. Handling logins
          1. Gated login
          2. Anytime login
            1. Responding to the user's login changes
        3. Guarded routes
        4. Advanced composition
          1. View caching
          2. Transitions
          3. The templated mode
        5. Child routers
          1. Dynamic child routes
        6. Custom modal dialogs
          1. Replacing the default context
        7. Using activators
        8. Binding to plain JavaScript objects
          1. Observable plugin setup
          2. Subscribing and extending
          3. Computed observables
          4. Promises
          5. Sample
        9. Summary
      14. 7. Best Practices
        1. Sticking to MVVM
          1. The view and the viewmodel
            1. Cluttering the viewmodel
            2. Cluttering the view
        2. Using service modules
        3. Creating small modules
        4. Writing unit tests
        5. Singleton versus instance
        6. Calling ko.applyBindings once (per root)
        7. Performance concerns
          1. Observable loops
          2. Limit active bindings
          3. Delegated events
        8. Summary
      15. 8. Plugins and Other Knockout Libraries
        1. Knockout Validation
          1. Default validation rules
          2. Configuring validation options
          3. Validation binding handlers
          4. Creating custom rules
        2. Knockout Mapping
          1. Updating the viewmodel
          2. Unmapping
          3. Mapping options
            1. Using keys for array updates
            2. Using create for the object construction
            3. Controlling updates
            4. Choosing which properties get mapped
            5. Challenges
        3. Knockout Kendo
        4. KoGrid
        5. Knockout Bootstrap
        6. Knockout Switch-Case
        7. Knockout Projections
        8. Knockout-ES5
          1. Browser support
        9. Summary
      16. 9. Under the Hood
        1. Dependency tracking
          1. ko.dependencyDetection
          2. Registering dependencies
          3. Subscribing to dependencies
          4. Subscribing to observable arrays
            1. Standard array functions
            2. The utility methods
        2. The prototype chain
          1. The ko.isObservable function
        3. The binding expression parser
          1. Knockout property writers
        4. Applying bindings
          1. Sorting binding handlers
          2. Running the binding handlers
        5. Templates
          1. The template binding handler
          2. The template engine
        6. The ko.utils reference
        7. Summary
      17. Index