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

Creating a new product

To create a product, follow the same steps as in the previous section:

  1. Add an AJAX mock call in the mocks/product.js file:

    $.mockjax({
  url: '/products',
  type:'POST',
  dataType: 'json',
  responseTime: 750,
  status:200,
  responseText: {
    'data': {
      text: 'Product created'
    }
  }
});

    You should keep in mind some considerations:

    • You should use the POST verb to create an object. Actually, you can use any verb you want, but as per the RESTful API conventions, the POST verb is the one you should use to create new objects.

    • The response text is a message that provides some information about the result.

    • The result itself is managed by the headers:

    • If you get a 2xx value in the status, the done method is fired.

    • If you get a 4xx or 5xx error, the fail method is called.

  2. Go to the modelview.js file and update the addProduct function:

    var addProduct = function (data) {
  var id = new Date().valueOf();
  var product = new Product(
    id,
    data.name(),
    data.price(...
Previous Section
End of Section 10
Next Section