O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

KnockoutJS Web Development

Book Description

Efficiently work with data, web templates, and custom HTML tags using KnockoutJS

In Detail

Knockout is a jQuery-friendly library that helps you to create rich, responsive displays and editor user interfaces with a clean underlying data model.

Starting with the installation and configuration of KnockoutJS, this book will describe the ins and outs of working with forms using arrays, nesting, and grids.

You will learn about event binding and context binding properties using JSON and AJAX. You will then explore the features of KnockoutJS like mapping and how to go about it using controller options. You will also learn how to use this feature for mapping multiple objects and managing them. This book provides an in-depth explanation of native templates, enhanced collection handling, and render event handling using third-party template engines.

By the end of the book, you will have knowledge of all the different functionalities KnockoutJS has to offer.

What You Will Learn

  • Understand the MVVM design is and how it can be made approachable
  • Simplify the usability of simple and detailed data collections
  • Work with web form fields including simpler ways to manage nested data collections
  • Manage your nested data collections efficiently, with web form fields
  • Use the alternative mapping style of coding with KnockoutJS mapping
  • Learn the joy of browser-side templates to render KnockoutJS friendly code
  • Create your own custom HTML tags that provide dynamic interactive logic using meaningful markup naming conventions and structures
  • Simplify page logic with automated calculations and control the visibility of your CSS elements with the help of robust yet friendly templates

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. KnockoutJS Web Development
    1. Table of Contents
    2. KnockoutJS Web Development
    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. 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
    8. 1. Getting Started with KnockoutJS
      1. Installing KnockoutJS
      2. Looking at MVVM
      3. Binding DOM elements using Knockout
        1. Binding text
        2. Binding HTML
        3. Binding CSS
        4. Binding numbers
        5. Managing visibility
        6. Multibound control
      4. Power development using browser developer tools
        1. The Knockout debugger
        2. Shortcuts
          1. The DOM inspection
          2. The AJAX inspection
          3. The resource inspection
          4. The device emulation
      5. Using internal functions with Knockout
        1. Preventing hidden features
      6. Automating calculations with Knockout
        1. Subtotal calculation
        2. Tax time
        3. Final total
      7. Working with non-Knockout functions
      8. Summary
    9. 2. Using Arrays, Nesting, and Grids
      1. Conditional binding
      2. Introduction to arrays in Knockout
        1. Working with array collections
        2. Removing the last item
      3. Sorting time
      4. The simpleGrid plugin
        1. Running the code
        2. Final sort
      5. Summary
    10. 3. Giving Forms the Knockout Touch
      1. Event binding
        1. The binding markup
        2. The binding checkbox with visibility
        3. Modifier keys
        4. Default actions
        5. Preventing bubbling
      2. The textInput binding
        1. Dynamic focus
      3. Radio and checkbox binding
        1. Enhanced event integration
      4. Select binding
        1. Selecting elements with the object collections
        2. Listing the management Knockout style
      5. The uniqueName binding
      6. Grid forms
      7. Summary
    11. 4. Coding – AJAX, Binding Properties, Mapping, and Utilities
      1. JSON done Knockout style
      2. Mapping – first look
      3. Connecting with AJAX remotely
      4. Unmapping your data
      5. Merging mapped data
      6. Mapping options
      7. Utility functions
        1. ko.utils.arrayFilter()
        2. ko.utils.arrayFirst()
        3. ko.utils.arrayMap()
        4. ko.utils.arrayGetDistinctValues ()
        5. ko.utils.arrayForEach()
        6. ko.utils.compareArrays()
      8. Purifying our computations
      9. Coding documents for computed observables
        1. Form 1
        2. Form 2
        3. Form 3
        4. Form 4
      10. Using a computed observable
      11. Using the computed context
      12. Summary
    12. 5. The Joy of Templates
      1. Native templates
      2. Enhanced collection handling
      3. Render event handling
      4. Third-party template options
        1. Modified template handling with Underscore
        2. Live updates and the subscribe method in Knockout
      5. Awesome template options
      6. Summary
    13. 6. Packaged Elegance
      1. Introduction to components
        1. Dynamic component selection
        2. Bring Your Own Tags (BYOT)
      2. Enhancing attribute handling
      3. Building your own libraries
        1. Bootstrap component example
      4. Understanding the AMD approach
      5. Component-based SPAs
        1. Best development strategies
          1. Getting real
        2. Coding time
        3. Adding navigation
          1. Adding pages
          2. Time for some custom style
          3. Bonus item
          4. Building cross-page interaction
      6. What next?
      7. Summary
    14. Index