Knockout.JS Essentials

Book Image

Knockout.JS Essentials

Book Image

Knockout.JS Essentials

Overview of this book

KnockoutJS Essentials

KnockoutJS Essentials

Credits

About the Author

About the Author

Acknowledgments

Acknowledgments

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

Refreshing the UI Automatically with KnockoutJS

Refreshing the UI Automatically with KnockoutJS

KnockoutJS and the MVVM pattern

A real-world application – koCart

Installing components

Observables to refresh the UI automatically

KnockoutJS Templates

KnockoutJS Templates

Preparing the project

Creating templates

Handling templates with if and ifnot bindings

Managing templates with jQuery

Managing templates with koExternalTemplateEngine

Custom Bindings and Components

Custom Bindings and Components

Custom bindings

Create a binding to debug – the toJSON binding

Managing KnockoutJS Events

Managing KnockoutJS Events

Event-driven programming

The click event

Unobtrusive events with jQuery

Delegation pattern

Building custom events

Events and bindings

Getting Data from the Server

Getting Data from the Server

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

The Module Pattern – RequireJS

The Module Pattern – RequireJS

Installing the Knockout context debugger extension

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

Durandal – The KnockoutJS Framework

Durandal – The KnockoutJS Framework

Installing Durandal

The shell view-model

Durandal life cycle

Building a page with Durandal

Developing Web Applications with Durandal – The Cart Project

Developing Web Applications with Durandal – The Cart Project

Setting up the project

Routing the project – the shell view-model

The navigation and shell templates

Grouping code by feature – managing big projects

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Setting up the project

To start the new project, we are going to follow some steps that will give us a good starting point to develop our project:

Create a new project as we did with the Knockout cart.
Inside this project, copy the content of the Durandal Starter Kit project.
Now we should have three folders in our project:
- app: This contains our application
- css: This contains stylesheets
- lib: This contains third-party libraries
Migrate the following libraries from the Knockout cart project to the Durandal cart project:
- icheck
- kovalidation
- mockjax
- mockjson
Install a new library called Toastr from http://codeseven.github.io/toastr/.
Update the ko.validation.js file on line 19 with the following code:
```
define(["knockout", "exports"], factory);
```
Move the style.css file from the Knockout cart to the css folder in the Durandal cart project.
Move the models folder inside the app folder.
Move the services folder inside the app folder.
Create a file called bindings.js at the same level as the main.js file...