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

Converting a normal module into an AMD module

To convert a normal module, we will perform the following steps. Always apply the same steps for all our modules. We need to wrap them into the define function, list dependencies, and return the module we returned in our old one.

Open the viewmodel.js file.
Create the define function:
```
define([],function(){});
```

Add all dependencies:

define([
  'knockout',
  'models/Product',
  'models/Customer',
  'models/CartProduct',
  'services/ProductService',
  'services/CartProductService',
  'resources/ProductResource',
  'resources/OrderResource'
],function (ko, Product, Customer, ProductService, CartProductService, ProductResource, OrderResource) {
});

Export the module into the define function:

define([],function(){
  var debug = ko.observable(false);
  var showDebug = function () {
    debug(true);
  } 
  ...
  var activate = function () {
    ProductResource.all()
      .done(allCallbackSuccess.bind(this));
  };
  return {
    debug: debug,
    showDebug:showDebug...