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

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
    7. www.PacktPub.com
      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

Product information

  • Title: KnockoutJS Essentials
  • Author(s): Jorge Ferrando
  • Release date: February 2015
  • Publisher(s): Packt Publishing
  • ISBN: 9781784397074