Book Image

Knockout.JS Essentials

Book Image

Knockout.JS Essentials

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
Knockout.JS Essentials
Feb, 2015 | 232 pages
No titles found
Table of Contents (16 chapters)
KnockoutJS Essentials
KnockoutJS Essentials
Credits
Credits
About the Author
About the Author
Acknowledgments
Acknowledgments
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Refreshing the UI Automatically with KnockoutJS
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
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
Custom Bindings and Components
Custom bindings
Create a binding to debug – the toJSON binding
Summary
4
Managing KnockoutJS Events
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
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
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
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
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

The Services module

Services are also singletons, like resources, so follow the same steps as the resources module:

  1. Open the services/ProductService.js file.

  2. Create the top hierarchy module:

    var Shop;
Shop = Shop || {};

  3. Create the Resources namespace:

    Shop.Services = Shop.Services || {};

  4. Define ProductService:

    Shop.Services.ProductService = (function(){
})();

  5. In this case the service has no dependencies.

  6. Finally, set the following code in the services/ProductService.js file. Since in the application the resources are singleton, extend the resource with the methods used in the following code:

    var Shop;
Shop = Shop || {};
Shop.Services = Shop.Services || {};
Shop.Services.ProductService = (function(Product) {
  var hasStock = function (product) {
    return product.stock() > 0;
  };

  var decreaseStock = function (product) {
    var s = product.stock();
    if (s > 0) {
      s--;
    }
    product.stock(s);
  };

  var clone = function (product) {
    return Product(product.id(), product.name...
Previous Section
End of Section 9
Next Section