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

Book Description

Learn how to design and create amazing web applications using KnockoutJS

In Detail

KnockoutJS is a JavaScript library that provides you with a sophisticated way of communicating between your UI and the underlying data model to create rich and desktop-like web UIs.

Starting with a basic web application, you'll work your way through full featured, real-world applications in order to learn how to make the most of this fantastic library. You'll discover how to build reusable widgets, integrate with external UI libraries such as jQuery UI, and build mobile-first responsive applications and single-page applications. By the end of this book, you will understand how to use this library, and how easy it can be to develop a model-based system. This book is a hands-on guide with step-by-step instructions, leading you through practical illustrations that will show you every aspect of a KnockoutJS project.

What You Will Learn

  • Create a model of your system and build applications around it

  • Integrate any external library easily

  • Design applications with TDD methodology

  • Use templates to reuse UIs effectively

  • Make a rich, single-page web application

  • Develop modular, testable applications

  • 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 Blueprints
      1. Table of Contents
      2. KnockoutJS Blueprints
      3. Credits
      4. About the Author
      5. About the Reviewers
        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. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. From Idea to Realization
        1. What KnockoutJS is and where you can get it
        2. The idea of this chapter – Simple Show Case
        3. The bare bone code of a KnockoutJS application
        4. Getting jQuery because it can be useful
          1. Browser compatibility
        5. Understanding MVVM, MVP, and MVC to get the best
          1. MVC (Model-View-Controller)
          2. MVVM (Model-View-View Model) to the rescue
            1. Model
            2. View
            3. View Model
          3. Data binding
        6. Getting data from the server
        7. The magic of KnockoutJS unveiled
        8. Filters and product details
          1. Product details
          2. Managing a Cart
          3. Using the Cart on the home page
          4. The Cart page
        9. Contact form
          1. Paying from the client-side code
          2. The contact form
        10. Summary
      9. 2. Starting Small and Growing in a Modular Way
        1. Analyzing the project – booking online
          1. Building the structure of our application
        2. Modularizing with the component binding handler
          1. AMD and RequireJS
          2. Updating starting code to use RequireJS
          3. Component binding handler
          4. Creating the bare bones of a custom module
            1. Creating the JavaScript file for the View Model
            2. Creating the HTML file for the template of the View
            3. Registering the component with KnockoutJS
            4. Using it inside another View
        3. Writing the Search Form component
          1. Adding the AMD version of jQuery UI to the project
          2. Making the skeleton from the wireframe
          3. Realizing an Autocomplete field for the destination
            1. The what and why about binding handlers
            2. Binding handler for the jQuery Autocomplete widget
          4. Improving two date fields by applying Date Picker widget
            1. Transforming already done code into a reusable one
          5. Making the button easy to customize
        4. Communicating with other components
        5. Adding the Hotel Cards
        6. Summary
      10. 3. SPA for Timesheet Management
        1. Analysing the project briefly – Timesheet SPA
        2. The SPA feature for the Timesheet SPA
        3. Choosing the right tool for the project
          1. Choosing between DurandalJS or plain KnockoutJS
          2. Creating a new project starting with the HTML StarterKit
        4. Building Timesheet SPA with DurandalJS
          1. Components of this project
          2. Getting the code for the Client-Server interface
          3. Checking authentication – Login component
            1. Auto-redirecting navigation to Login page
            2. Adding a logout button
          4. Making a dashboard for the Employee
            1. Transforming a table into a grid with bells and whistles
            2. Building a few forms to update data
          5. Realizing a dashboard for the Team Manager
        5. Summary
      11. 4. Tracking Expense Using PhoneGap
        1. Understanding hybrid mobile applications
        2. Getting PhoneGap/Cordova
        3. Defining what Piggy Bank should be
        4. Creating a starting environment for the project
        5. Building the application with jQuery Mobile
          1. Realizing the global layout of the application
          2. Making the list view with all the Accounts
            1. Putting the tests inside the bundle
          3. Adding the Detail page view
            1. Enhancing the application with the unit tests
        6. Refactoring and working on the missing parts
          1. Fixing KnockoutJS binding handler inside jQuery Mobile
          2. Adding the contact plugin
        7. Publishing the application
        8. Summary
      12. 5. Wizard for the Public Administration
        1. The project, a real-world web application
          1. Looking at the big picture of the project
          2. Reviewing the content we got for free
        2. Analysing and developing the Relocate module
          1. Graceful Degradation versus Progressive Enhancement
            1. Reasoning against Progressive Enhancements
          2. Making the form for the first child route
            1. Asking for personal information
            2. Fixing a hidden bug
            3. Adding a new binding handler for the asynchronous loading
            4. Enhancing the selection fields
        3. Updating the code to be accessible
          1. A few words about accessibility
          2. Making the gender field accessible
          3. Updating the loading binding handler for accessibility
        4. Working to make the app SEO crawlable
          1. Using a NodeJS server to return SEO pages
          2. Caching the page by yourself
        5. Summary
      13. Index