QooXdoo (http://qooxdoo.org/) is an object oriented Java Script framework with tons of cool functionality. We’re using QooXdoo as frontend. One great feature is the binding framework of QooXdoo. With some kind of magic you can bind for example form elements to a JSON object (and of course vice versa). We had the issue, that wanted to bind an object to a list controller. A list controller does the databinding for list components (like a Select Box). In an simple scenario the labels of this list are equal to the values that have to be saved later in the model. In our case this simple scenario wont work. We had always a key / value pair like this (in JSON style):

{ key: "4711", value: "foo" }

To be stored in a model like this (in reality this is of course a little more complex ;):

{ selected: null }

To create a databinding, that finally binds the selected (key) value to the  model we have to do the following steps:

1. create a select box (or any other list component)

1
2

//create form item
var select = new qx.ui.form.SelectBox();

2. create the list items (key / value pairs):

3
4
5

//create the property objects
var listItems = qx.data.marshal.Json.createModel({bar:[{key: "a", value: "foo_a"},{key: "b", value: "foo_b"},{key: "c", value: "foo_c"}]});
this.debug("list properties --> " + qx.dev.Debug.debugProperties(listItems));

3. bind them to the list controller

6
7
8
9
10
11
12
13
14

//create list controller
var listController = new qx.data.controller.List(listItems.getBar(), select, "value");
 
listController.setDelegate({
  bindItem: function(controller, item, index) {
    //fill the model property with the key value
    controller.bindProperty("key", "model", null, item, index);
  }
});

We have to use here the controllers delegate method to set explicitly the key value to the list items model property (the model property is the data container for the value).

4. create the model

15
16
17

//create the model
var model = qx.data.marshal.Json.createModel({selected: null });
this.debug("model properties --> " + qx.dev.Debug.debugProperties(model));

5. create the controller for the model (object controller):

18
19

//create object controller
var objectController = new qx.data.controller.Object(model);

6. bind the list controller to the object controller:

20
21

//bind selection to object controller
objectController.addTarget(listController, "selection[0]", "selected", true);

7. some additional lines to run the code in the QooXdoo playground:

22
23
24
25
26
27
28
29
30
31
32
33
34
35

//create listener
select.addListener("changeSelection", function(e){
  this.debug("model properties --> " + qx.dev.Debug.debugProperties(model));
},this);
 
// Document is the application root
var doc = this.getRoot();
 
// Add select to document at fixed coordinates
doc.add(select,
{
  left : 100,
  top  : 50
});

You can try out the complete sample here: http://tinyurl.com/2dbvkh7. As you can see in the log (activate it over the ‘Log’ button), everything works fine:

sample log - ok

But this only works for the qooxdoo devel version as expected! If you will try the code with the actual production release not the key value will be bind to the model, but the whole key /  value pair object (which is not what we wanted). Try it out here: http://tinyurl.com/2d3hsbr

sample log not ok

Tweet

code sample, java script, qooxdoo gui