8. Developing Web Applications with Durandal – The Cart Project | Knockout.JS Essentials

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Knockout.JS Essentials

By : Ferrando

4 (2)

Knockout.JS Essentials

4 (2)

By: Ferrando

Overview of this book

If you are a JavaScript developer who has been using DOM manipulation libraries such as Mootools or Scriptaculous, and you want go further in modern JavaScript development with a simple and well-documented library, then this book is for you. Learning how to use Knockout will be perfect as your next step towards building JavaScript applications that respond to user interaction.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Refreshing the UI Automatically with KnockoutJS

1. Refreshing the UI Automatically with KnockoutJS

KnockoutJS and the MVVM pattern

A real-world application – koCart

Installing components

The view-model

Observables to refresh the UI automatically

Summary

2. KnockoutJS Templates

2. KnockoutJS Templates

Preparing the project

Creating templates

Handling templates with if and ifnot bindings

Managing templates with jQuery

Managing templates with koExternalTemplateEngine

Summary

3. Custom Bindings and Components

3. Custom Bindings and Components

Custom bindings

Create a binding to debug – the toJSON binding

Summary

4. Managing KnockoutJS Events

4. Managing KnockoutJS Events

Event-driven programming

The click event

Event types

Event binding

Unobtrusive events with jQuery

Delegation pattern

Building custom events

Events and bindings

Summary

5. Getting Data from the Server

5. Getting Data from the Server

REST services

Defining CRUD

Singleton resources

Setting CRUD operations in the resource

Using resources in the view-model

Using Mockjax to mock HTTP requests

Generating mock data with MockJSON

Retrieving a product by ID

Creating a new product

Separation of concerns – behavior and data

Creating the product service

Creating the CartProduct service

Updating a product

Deleting a product

Sending the order to the server

Handling AJAX errors

Validating data

Extending the product model

Extending the customer model

Summary

6. The Module Pattern – RequireJS

6. The Module Pattern – RequireJS

Installing the Knockout context debugger extension

The console

The module pattern

Creating the Shop module

The ViewModel module

The Models module

The Resources module

The Services module

Events, bindings, and Knockout components

Updating the add-to-cart-button component

Updating events

Using RequireJS to manage dependencies

Updating the template engine

Configuring RequireJS

Using RequireJS in our project

Defining the app.js file

Converting a normal module into an AMD module

Applying RequireJS to components

Applying RequireJS to mocks

Applying RequireJS to bindings

Applying RequireJS to events

The limits of the application

Summary

7. Durandal – The KnockoutJS Framework

7. Durandal – The KnockoutJS Framework

Installing Durandal

The shell view-model

Durandal life cycle

Building a page with Durandal

Summary

8. Developing Web Applications with Durandal – The Cart Project

8. Developing Web Applications with Durandal – The Cart Project

Introduction

Setting up the project

Routing the project – the shell view-model

The navigation and shell templates

Grouping code by feature – managing big projects

Summary

Index

Index

Routing the project – the shell view-model

Durandal gives us the possibility of managing the routes in our project. We are going to split different parts of our project into pages. That will give a better user experience because we will be focused on just one task at a time.

We will split the app into four parts:

The catalog
The cart
The order
The product CRUD

These parts will contain more or less the same code we built in the Knockout application. Sometimes we will need to adapt small pieces of code.

To create these new routes, we will open the shell.js file and update the router:

router.map([
  { route: ['','/','catalog'], title:'Catalog', moduleId: 'viewmodels/catalog', nav: true },
  { route: 'new', title:'New product', moduleId: 'viewmodels/new', nav: true },
  { route: 'edit/:id', title:'Edit product',moduleId: 'viewmodels/edit', nav: false },
  { route: 'cart', title:'Cart', 
    moduleId: 'viewmodels/cart', nav: false },
  { route: 'order', title:'Order', moduleId: 'viewmodels/order', nav...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Knockout.JS Essentials

Search

Your notes and bookmarks