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

Book Description

Implement a successful JavaScript-rich application with KnockoutJS, jQuery, and Bootstrap

In Detail

KnockoutJS is a Model View ViewModel (MVVM) framework that allows you to simplify the design of complex user. Knockout makes data manipulation simple and leads to maintainable web applications.

KnockoutJS Essentials gives you an insight into the best practices when designing and building MVVM web applications using the KnockoutJS framework. Packed with real-world tasks, this book starts with an introduction to the Knockout library, helping you make organizational and design decisions. You get a walk-through of the key concepts and terms that are common to development of Knockout applications. Finally, you will learn about the full-stack Knockout framework DurandalJS, which will give you all the tools you need to write complete single-page applications.

What You Will Learn

  • Organize and maintain your code when applications begin to grow

  • Get to know JavaScript patterns and best practices to keep your code readable

  • Bind JavaScript objects and DOM elements with practical examples

  • Integrate and manage events to give the user a better experience

  • Extend the framework to create your own components

  • Create a single-page application using the Durandal JavaScript framework

  • Split your application in modules to keep it engrossing and maintainable

  • Manage templates to keep your HTML as simple as possible

  • 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 If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

    Table of Contents

    1. KnockoutJS Essentials
      1. Table of Contents
      2. KnockoutJS Essentials
      3. Credits
      4. About the Author
      5. Acknowledgments
      6. About the Reviewers
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      8. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      9. 1. Refreshing the UI Automatically with KnockoutJS
        1. KnockoutJS and the MVVM pattern
        2. A real-world application – koCart
        3. Installing components
        4. The view-model
          1. The view
          2. The model
        5. Observables to refresh the UI automatically
          1. Managing collections with observables
          2. Inserting elements in collections
          3. Computed observables
        6. Summary
      10. 2. KnockoutJS Templates
        1. Preparing the project
        2. Creating templates
          1. The header template
          2. The catalog template
          3. The add-to-cart-modal template
          4. The cart-widget template
          5. The cart-item template
          6. The cart template
          7. The order template
          8. The finish-order-modal template
        3. Handling templates with if and ifnot bindings
        4. Managing templates with jQuery
        5. Managing templates with koExternalTemplateEngine
        6. Summary
      11. 3. Custom Bindings and Components
        1. Custom bindings
          1. The toggle binding
          2. The currency binding
        2. Create a binding to debug – the toJSON binding
          1. Being semantic with our bindings
          2. Wrapping a jQuery plugin into a custom binding
          3. Components – isolated view-models
          4. Advanced techniques
            1. Controlling descendant bindings
            2. Using virtual elements
            3. Preprocessing data before binding
        3. Summary
      12. 4. Managing KnockoutJS Events
        1. Event-driven programming
        2. The click event
          1. Passing more parameters
          2. Allowing the default click action
          3. Event bubbling
        3. Event types
        4. Event binding
        5. Unobtrusive events with jQuery
        6. Delegation pattern
        7. Building custom events
        8. Events and bindings
        9. Summary
      13. 5. Getting Data from the Server
        1. REST services
        2. Defining CRUD
        3. Singleton resources
        4. Setting CRUD operations in the resource
        5. Using resources in the view-model
        6. Using Mockjax to mock HTTP requests
        7. Generating mock data with MockJSON
        8. Retrieving a product by ID
        9. Creating a new product
        10. Separation of concerns – behavior and data
        11. Creating the product service
        12. Creating the CartProduct service
        13. Updating a product
        14. Deleting a product
        15. Sending the order to the server
        16. Handling AJAX errors
        17. Validating data
        18. Extending the product model
        19. Extending the customer model
        20. Summary
      14. 6. The Module Pattern – RequireJS
        1. Installing the Knockout context debugger extension
        2. The console
        3. The module pattern
        4. Creating the Shop module
        5. The ViewModel module
        6. The Models module
        7. The Resources module
        8. The Services module
        9. Events, bindings, and Knockout components
        10. Updating the add-to-cart-button component
        11. Updating events
        12. Using RequireJS to manage dependencies
        13. Updating the template engine
        14. Configuring RequireJS
        15. Using RequireJS in our project
        16. Defining the app.js file
        17. Converting a normal module into an AMD module
        18. Applying RequireJS to components
        19. Applying RequireJS to mocks
        20. Applying RequireJS to bindings
        21. Applying RequireJS to events
        22. The limits of the application
        23. Summary
      15. 7. Durandal – The KnockoutJS Framework
        1. Installing Durandal
          1. Durandal patterns
          2. The index.html file
          3. The main.js file
        2. The shell view-model
          1. The shell view
        3. Durandal life cycle
          1. The activation life cycle
          2. The promise pattern
          3. Compositions
            1. Object composition
            2. Visual composition
          4. Router
            1. Route parameters
          5. Triggering navigation
          6. Child routers
          7. Events
          8. Widgets
            1. Setting up widgets
            2. Writing the widget view
            3. Writing the widget view-model
            4. Registering the widget
        4. Building a page with Durandal
        5. Summary
      16. 8. Developing Web Applications with Durandal – The Cart Project
        1. Introduction
        2. Setting up the project
        3. Routing the project – the shell view-model
        4. The navigation and shell templates
          1. The catalog module
            1. The catalog view
            2. The catalog view-model
          2. The cart service
          3. The log service
          4. Adding products to the catalog
            1. The add product view
            2. The edit view
            3. The add product view-model
            4. Making mocks real
            5. The edit view-model
          5. The cart module
            1. The cart view
            2. The cart view-model
          6. The order module
            1. The order view
            2. The order view-model
        5. Grouping code by feature – managing big projects
        6. Summary
      17. Index