JayData.org

How to use JayData with Knockout.js

Author: Peter Aron Zentai May 25th, 2012

, , , , , , , ,


One of the nicest and coolest new feature of JayData is the Knockoutjs integration module that comes with the latest JayData release, version 1.0.4. With this you can have templated lists and two way data-bound displays in a matter of minutes.

  • Knockoutjs is a fine JavaScript library with MVVM features plus templating the way you’ll like it. Within this document it is assumed that you have a basic understanding of both JayData and Knockoutjs.

Query results as Knockout objects

Recap classic toArray()

The $data.EntitySet.toArray function is maybe one of the most commonly used FrameOperators that immediately executes the query it is called on. By default it has a signature that takes a function as parameter to execute when data is available:

image

When the callback gets invoked the result is presented as an array of entities that you can work with.

Extended toArray()

To access the Knockoutjs features you have to include JayDataModules/knockout.js in your application, so this is how your html page should begin:

If you have this file included toArray() is extended with a new overload:

image

and this is how to use it:

 

If we put the pieces together, here is the miniapplication that list entities from an OData endpoint using Knockoutjs templating:

 

And the result is:

image

Entity.asKoObservable()

What toArray() does is much more then just inserting entity objects into an ko.observableArray. Before that is done each object is wrapped into a new type Observable<Entity> that converts standard ECMAScript5 property notation to the knockout way of treating properties as functions. This is achieved by the extension function asKoObservable – another feature of the JayData Knockoutjs module.

Code:

Result:

 

Consequently you can access the properties of the koProduct instance by calling methods:

This way every property of an entity becomes a ko.observable and with the Knockoutjs templating engine our UI can now reflect changes in the underlying data model.

List products on category click

Let’s list the products of the category the user selected with a click. We need to extend our view model with two more model properties: selectedCategory and categoryProducts

 

Also, we need a function that will respond on the selection event:

Notice, that the event handler receives the original ObservableCategory object with all it’s properties to read. Also notice how can you pass parameters to a query: use the thisArg parameters of the ES5 array.filter() to provide a context for parameters.

Only 2 things left…

1) Tell the UI to call selectCategory function whenever a user clicks on a category name.

Revisit the template we previously used to display categories: the Knockoutjs click binding will do what its name implies: binds the given functions on the click event of the context element.

2) Display products with a template bound to the view model:

Putting it together:

 

Edit selected product

The last step is to create some more code that allows for editing and saving a selected product.

Again we extend our view model class with a member for the selectedProduct plus some boilerplate code that attaches our wrapped entity to the context when it gets selected for editing. Attaching an entity to the context before modifications made is mandatory in order to collect changes in the entity fields.

 

 

We also need a view to display the form to edit the selected product

That is pretty much the whole thing we need it to work. Yet again putting the pieces together, the following application will list categories, upon selecting one will list its products and lets the user to select a product and edit its fields. Pretty awesome for this small application:

The northwind product editor with Knockoutjs

 


, , , , , , , ,