问题描述
有人可以提供一个示例,如何在qooxdoo ComboBox或VirtualComboBox中的键值对中正确进行数据序列化吗?
我有这个示例数据[{"label":"","value":"0"},{"label":"Male","value":"m"},{"label":"Female","value":"f"}]
在标签中,我想显示标签,在服务器中,我想发送值。
似乎序列化程序使用的是getValue()函数,该函数仅返回文本框的内容。 我在这里有一个例子但是我不知道如何发送“ M”而不是“ Male”。 类似于这个示例,来自DemoBrowser
1楼
saaj
2
已采纳
2015-07-29 18:05:16
我在Qooxdoo 1.x( )的几天里报告了一个错误,大约在4年前。
但这更多的是缺少功能而不是错误。
将复杂的数据结构绑定到表单并不是一件容易的事。
它需要对Qooxdoo数据绑定有充分的了解,并需要大量实践。
但是,使用qx.data.controller.Form
构建qx.ui.form.Form
它为您提供了极大的灵活性和自动化。
关键是您使用每个表单窗口小部件设置的绑定选项。
它可以控制从模型到小部件的内容,反之亦然。
只需一点技巧,您甚至可以在qx.data.controller.Form
下使用Qooxdoo表。
有一个用于将组合框绑定到表单的 ,该表与代表列表项的Qooxdoo对象一起运行。
var listData = [
{"label": "(empty)", "value": "0"},
{"label": "Male", "value": "m"},
{"label": "Female", "value": "f"}
];
var listModel = qx.data.marshal.Json.createModel(listData);
var formData = {'gender': listData[0]};
var formModel = qx.data.marshal.Json.createModel(formData);
var form = new qx.ui.form.Form();
var formController = new qx.data.controller.Form(null, form);
var comboBox = new qx.ui.form.ComboBox();
var comboList = comboBox.getChildControl('list');
var listController = new qx.data.controller.List(listModel, comboList, 'label');
form.add(comboBox, 'Gender', null, 'gender');
var genderModelToTargetConverter = function(value, model, sourceObj, targetObj)
{
if(value instanceof qx.core.Object)
{
listController.setSelection(new qx.data.Array([value]));
return value.getLabel();
}
return value;
};
var genderTargetToModelConverter = function(value, model, sourceObj, targetObj)
{
return listController.getSelection().getItem(0);
};
formController.addBindingOptions(
'gender',
{'converter': genderModelToTargetConverter.bind(this)},
{'converter': genderTargetToModelConverter.bind(this)}
);
formController.setModel(formModel);
var sendButton = new qx.ui.form.Button('Send');
this.getRoot().add(comboBox, {left: 10, top: 10});
this.getRoot().add(sendButton, {left: 10, top: 50});
sendButton.addListener('execute', function()
{
var result = qx.util.Serializer.toNativeObject(formModel);
console.log(result['gender']);
}, this);
在实践中,在同一个班级中全都这样做是不太可能的。 它脆弱而复杂。 基本上,您需要基于Qooxdoo数据层实现某种MVC。 然后事情变得非常清晰和简单。 例如,这是cherrypy-webapp-skeleton的 ,具有如此简单的实现。