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 handle