Documentation

1 Getting Started
2 Design Overview
3 Page Controller Boot Process
4 Your First App
5 Page Controller
6 Modules
7 Components
8 jqcEmpty
9 jqcLabel
10 jqcButton
11 jqcLayer
12 jqcPanelDeck
13 jqcAccordion
14 jqcProgressBar
15 Data Binding & Remote Data Synchronization
16 jqcDataService
17 jqcDataModel
18 jqcViewModel
19 jqcList
20 jqcTable
21 jqcForm
22 jqcResponsiveLayoutManager
23 jqcTreeList
24 Demos

jqcDataModel


This document matches version 1.6.0 .

The jqcDataModel component is used to contain the data objects which your web app displays. A jqcDataModel object contains an array of data object which are regular JavaScript objects. These data objects can then be referenced by internal view model objects in the jqcViewModel of the GUI components displaying these data objects. See the text on data binding for information on that.

The jqcDataModel is optional. You can set data directly on the jqcViewModel instances if you prefer.

Creating a jqcDataModel

You can create a jqcDataModel in two way: Declaratively using an HTML element, or programmatically.

Here is an example that creates a jqcDataModel declaratively:

<span id="theDataModel" jqc-type="jqcDataModel"></span>  

Here is an exaple that creates a jqcDataModel programmatically:

<span id="bootModule" jqc-module="bootModule"></span>

<script>

    function bootModule() {
        var bootModule = {};

        bootModule.postInstantiate = function() {
            bootModule.jqc.pageController.addComponent("theDataModel",
                bootModule.jqc.pageController.factories.jqcDataModel());
        }

        return bootModule;
    }
</script>    

Adding Listeners

When data is changed inside the jqcDataModel it can notify its listeners about the changes. Here is an example of how you add listeners to a jqcDataModel:

<table id="theTable" jqc-type="jqcTable"></table>    
    
<span id="bootModule" jqc-module="bootModule"></span>

<script>

    function bootModule() {
        var bootModule = {};

        bootModule.postInstantiate = function() {
            bootModule.jqc.pageController.addComponent("theDataModel",
                bootModule.jqc.pageController.factories.jqcDataModel());
        }

        bootModule.postConfigure = function() {
            bootModule.jqc.pageController.components.theDataModel.idField("taskId");

            bootModule.jqc.pageController.components.theDataModel.addListener(
                    bootModule.jqc.pageController.components.theTable.viewModel);

        }

        return bootModule;
    }
</script>    

Functions

The jqcDataModel contains the following functions:

FunctionDescription
idField(fieldName) Sets the name of the field (property) in the data objects kept in this data model which contains the unique id for each data object.
setData(dataArray) Sets the data objects in the dataArray array (of data objects) as the array of data objects contained in the jqcDataModel object. Any data objects kept in the data model already are removed.
addData(dataArray) Adds the data objects in the dataArray array (of data objects) to the array of data objects already contained in the jqcDataModel object.
updateData(dataArray) Updates the data objects in the dataArray array (of data objects) in the array of data objects already contained in the jqcDataModel object. Basically what happens is that the data model finds the existing data objects matching the updated objects based on their unique id, removes it, and inserts the updated objects in its place.
removeData(dataArray) Removes the data objects in the dataArray array (of data objects) from the array of data objects already contained in the jqcDataModel object. Basically what happens is that the data model finds the existing data objects matching the data objects to remove based on their unique id and removes them. Thus, the data objects in the dataArray do not actually need to contain more than the id property.
addListener(listenerObject) Adds a listener (JavaScript object) to this data model. The listener object should have the same four functions as the jqcDataModel has ( setData(dataArray), addData(dataArray), updateData(dataArray), removeData(dataArray) ). When one of these functions are called on the jqcDataModel, the corresponding function is called on all listeners objects. The addListener() function returns a listener id which is needed if you want to remove the listener again.
removeListener(listenerObjectId) Removes the listener object that has the given id. Use the id returned when the listener was added.