javascript - Qooxdoo ComboBox键/值序列化

有人可以提供示例如何在qooxdoo ComboBox或VirtualComboBox中的键值对中正确进行数据序列化吗？

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

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

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

最佳答案

我在Qooxdoo 1.x（#5469）的几天内报告了一个错误，大约4年前。但这更多的是缺少功能而不是错误。将复杂的数据结构绑定到表单并不是一件容易的事。它需要对Qooxdoo数据绑定有充分的了解，并需要大量实践。但是，它在使用qx.ui.form.Form构建qx.data.controller.Form时为您提供了极大的灵活性和自动化。

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

有一个snippet用于将组合框绑定到表单，该表单与代表列表项的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的frontend，它具有如此简单的实现。

关于javascript - Qooxdoo ComboBox键/值序列化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31628489/