3.0 beta 2

Data Binding

ActiveWidgets objects can be configured to display external data via data binding interface. For example, you can use a form panel to show and edit a data record or attach external data source to the datagrid component.

The data can be a plain javascript object, a deferred/promise object or an instance of AX.Data class.

Assigning the data

To assign the data to the ActiveWidgets object use data() method.

var obj = new AX.Component({
    html: '{{$name}}: {{$price}}'
});

obj.data({
    name: 'Product 1',
    price: 123.45
});

The data() method also accepts a deferred/promise instead of an actual data object.

// load data and template with jQuery (asynchronously)
var product = $.getJSON('services/product', params),
    template = $.get('templates/product.html');

var panel = new AX.Panel({
    id: 'panel1',
    data: product,  // deferred JSON data
    html: template  // deferred html template
});

Configuring the bindings

The assigned data is propagated to all object properties and recursively into the child objects. Using bind() method you can attach object properties to the individual data fields or simple expressions.

var panel = new AX.Panel({

    input1: {
        component: 'input',
        bind: '$productName',
        label: 'Product',
        width: 200
    },

    items: ['@input1']
});

panel.data({
    productName: 'Tablet PC (8")'
});