Dynamic queries with the JayData Knockout.js module

Author: Viktor Lazar May 31st, 2012

, , , ,

With the JayData Knockout.js module you can achieve fully dynamic queries. A dynamic query is a really useful and easy-to-use tool for you to develop HTML5 applications in no time.

Imagine a code where you have to only write queries once and the execution of the query depends on an observable. This way a use case like filtering a table of data is only a few lines of code.

Data binding and dynamic queries

Data binding is really powerful to connect the UI with the underlying data layer. But without dynamic queries you have to implement event handlers to refresh the data. Using dynamic queries this work is already done. You have to only bind an observable to the query which updates the data under the UI.

This is our fully working example application. We use only some observables and only one query to initialize the category filter and one query to update the table data. This updater query is the important thing you have to watch for.

We drop in our filtering observables as query parameters. Because of this when the values of these observables changes our query will be executed again passing the changed values of these observables to the filter function.

We achieve the update of the table data by using an observable array as the first argument of the toArray function. This way the query will update our observable array and Knockout.js will do the rest.

As you can see even the Knockout.js part looks very clear. On the category filter drop-down control we use a custom binder to initialize the value of the caption option.

The example is very easy to extend with more filters and more functionality. Experiment with dynamic queries and have fun!

, , , ,