KnockoutJS Blueprints电子书

KnockoutJS Blueprints

Table of Contents

KnockoutJS Blueprints

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. From Idea to Realization

What KnockoutJS is and where you can get it

The idea of this chapter – Simple Show Case

The bare bone code of a KnockoutJS application

Getting jQuery because it can be useful

Browser compatibility

Understanding MVVM, MVP, and MVC to get the best

MVC (Model-View-Controller)

MVVM (Model-View-View Model) to the rescue

Model

View

View Model

Data binding

Getting data from the server

The magic of KnockoutJS unveiled

Filters and product details

Product details

Managing a Cart

Using the Cart on the home page

The Cart page

Contact form

Paying from the client-side code

The contact form

Summary

2. Starting Small and Growing in a Modular Way

Analyzing the project – booking online

Building the structure of our application

Modularizing with the component binding handler

AMD and RequireJS

Updating starting code to use RequireJS

Component binding handler

Creating the bare bones of a custom module

Creating the JavaScript file for the View Model

Creating the HTML file for the template of the View

Registering the component with KnockoutJS

Using it inside another View

Writing the Search Form component

Adding the AMD version of jQuery UI to the project

Making the skeleton from the wireframe

Realizing an Autocomplete field for the destination

The what and why about binding handlers

Binding handler for the jQuery Autocomplete widget

Improving two date fields by applying Date Picker widget

Transforming already done code into a reusable one

Making the button easy to customize

Communicating with other components

Adding the Hotel Cards

Summary

3. SPA for Timesheet Management

Analysing the project briefly – Timesheet SPA

The SPA feature for the Timesheet SPA

Choosing the right tool for the project

Choosing between DurandalJS or plain KnockoutJS

Creating a new project starting with the HTML StarterKit

Building Timesheet SPA with DurandalJS

Components of this project

Getting the code for the Client-Server interface

Checking authentication – Login component

Auto-redirecting navigation to Login page

Adding a logout button

Making a dashboard for the Employee

Transforming a table into a grid with bells and whistles

Building a few forms to update data

Realizing a dashboard for the Team Manager

Summary

4. Tracking Expense Using PhoneGap

Understanding hybrid mobile applications

Getting PhoneGap/Cordova

Defining what Piggy Bank should be

Creating a starting environment for the project

Building the application with jQuery Mobile

Realizing the global layout of the application

Making the list view with all the Accounts

Putting the tests inside the bundle

Adding the Detail page view

Enhancing the application with the unit tests

Refactoring and working on the missing parts

Fixing KnockoutJS binding handler inside jQuery Mobile

Adding the contact plugin

Publishing the application

Summary

5. Wizard for the Public Administration

The project, a real-world web application

Looking at the big picture of the project

Reviewing the content we got for free

Analysing and developing the Relocate module

Graceful Degradation versus Progressive Enhancement

Reasoning against Progressive Enhancements

Making the form for the first child route

Asking for personal information

Fixing a hidden bug

Adding a new binding handler for the asynchronous loading

Enhancing the selection fields

Updating the code to be accessible

A few words about accessibility

Making the gender field accessible

Updating the loading binding handler for accessibility

Working to make the app SEO crawlable

Using a NodeJS server to return SEO pages

Caching the page by yourself

Summary

Index