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

jqcList


This document matches version 1.6.0 .

The jqcList component is used to display data as either an ordered or unordered list. The data comes from an array of JavaScript objects. The jqcList has a jqcViewModel internally which holds the data.

jqcList Example

Here is an example that shows how to use a jqcList:

<ol id="theList" jqc-type="jqcList"></ol>

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

<script>
    function bootModule() {
        var components = null;
        var bootModule = {};
        bootModule.postInstantiate = function() {
             components = bootModule.jqc.pageController.components;
        };
        bootModule.postConfigure   = function() {
            var theList = components.theList;
            theList.labelField("text");
        }:

        bootModule.postRender = function() {
            theList.viewModel.setData([
                { text: "element 1" }, { text : "element 2" }, { text : "element 3" } ]);
        };

        return bootModule;
    }
</script>    

This example will generate an ordered list (ol) based on the data set on the jqcList's view model. In this example the property named text will be used as the label inside the <li></li> elements.

Properties

PropertyDescription
viewModel The jqcViewModel containing the data objects (wrapped in view model objects) to be displayed in this jqcList.

Functions

FunctionDescription
labelField(fieldName) Sets the name of the property (field) in the data objects to display.