javascript - Qooxdoo ComboBox 键/值序列化

Question

有人可以举例说明如何在 qooxdoo ComboBox 或 VirtualComboBox 中正确序列化键值对中的数据吗？

我有这个示例数据 [{"label":"","value":"0"},{"label":"Male","value":"m"},{"label ":"女","值":"f"}]

在标签中我想显示标签，在服务器中我想发送值。

序列化程序似乎使用了 getValue() 函数，它只返回文本框的内容。我这里有一个例子 http://tinyurl.com/qcl7pmg但我不知道如何让它发送“M”而不是“Male”。类似于 DemoBrowser 中的示例 http://demo.qooxdoo.org/current/demobrowser/#data~Form.html

Answer 1

大约 4 年前，我在 Qooxdoo 1.x ( #5469 ) 的日子里报告了一个错误。但这更多的是缺乏功能而不是错误。将复杂的数据结构绑定(bind)到表单并不是一件简单的事情。它需要对 Qooxdoo 数据绑定(bind)有很好的理解并进行大量实践。但它为您使用 qx.data.controller.Form 构建 qx.ui.form.Form 提供了极大的灵 active 和自动化。

关键是您使用 qx.data.controller.Form.prototype.addBindingOptions 为每个表单小部件设置的绑定(bind)选项.它可以控制从模型到小部件的内容，反之亦然。通过一些小技巧，您甚至可以在 qx.data.controller.Form 下使用 Qooxdoo 表。

有一个 snippet用于将组合框绑定(bind)到表单，该表单使用表示列表项的 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。然后事情变得非常清楚和简单得多。例如，这里是 frontend cherrypy-webapp-skeleton 实现如此简单。