qooxdoo qx.ui.form.VirtualComboBox 键值对

Question

我想知道在 qooxdoo qx.ui.form.VirtualComboBox 中是否有使用键值对的首选方法。我想在文本框中设置名称，但在请求时应返回 id。我见过的这个小部件的所有示例都只使用该值。我正在发布我如何解决问题的代码，但我想知道是否有 better/prefered 使用数据绑定的方法。到目前为止，每次我需要值或键时，我都会循环遍历模型以找到匹配项。这是游乐场示例：http://tinyurl.com/neyfwva

//John is set for testing purposes
var myJSONObject = {"personal": [
        {"name": "Martin", "id": "1", "age": "32"},
        {"name": "Horst", "id": "2", "age": "55"},
        {"name": "Peter", "id": "3", "age": "23"},
        {"name": "John", "id": "2", "age": "40"}  ]
};

var jsonmodel = qx.data.marshal.Json.createModel(myJSONObject);

var comboBox = new qx.ui.form.VirtualComboBox(jsonmodel.getPersonal());
comboBox.setLabelPath("name");

comboBox.setDelegate({bindItem : function(controller, item, id) {
  controller.bindProperty("name", "label", null, item, id);
  controller.bindProperty("id", "model", null, item, id);
}});


this.getRoot().add(comboBox);

//#################################################################
//-->> get "ID" from selected value
var button1 = new qx.ui.form.Button("get ID from selectbox");
this.getRoot().add(button1,
{
  left : 20,
  top  : 50
});
button1.addListener("execute", function(e) {
  var model = comboBox.getModel();
  var selection= null;

  for(var i = 0, l = model.getLength(); i < l; i++){
    if(model.getItem(i).getName() === comboBox.getValue()){
      selection = model.getItem(i);
      break;
    }
  }

  if(selection){
  alert(selection.getId());
  }
});
//#################################################################

//#################################################################
//-->> set value "Horst" by giving id
var button2 = new qx.ui.form.Button("set ID -2- (also Horst)");
this.getRoot().add(button2,
{
  left : 200,
  top  : 50
});
button2.addListener("execute", function(e) {
  var model = comboBox.getModel();
  var selection = null;

  for(var i =0, l = model.getLength(); i < l; i++){
    if(model.getItem(i).getId() === "2"){
      selection = model.getItem(i);
      break;
    }
  }

  if(selection){
  comboBox.setValue(selection.getName());
  }
});

Answer 1

qx.ui.form.VirtualComboBox 的子控件 dropdown 具有正常的 selection 数据数组。尽管 Qooxdoo 的 API 参考和文档非常好和详尽，但针对此类情况的建议是 源代码就是您的文档（您可以直接从API 通过以下 查看源代码 链接进行参考）。 Qooxdoo 的代码同样优秀且易于理解。

这里是modified snippet：

var data = {"personal": [
  {"name": "Martin", "id": "1", "age": "32"},
  {"name": "Horst", "id": "2", "age": "55"},
  {"name": "Peter", "id": "3", "age": "23"},
  {"name": "John", "id": "2", "age": "40"}  
]};

var model = qx.data.marshal.Json.createModel(data);

var comboBox = new qx.ui.form.VirtualComboBox(model.getPersonal());
comboBox.setLabelPath("name");

this.getRoot().add(comboBox);

var getButton = new qx.ui.form.Button("Get id");
this.getRoot().add(getButton, {'left': 20, 'top': 50});

getButton.addListener("execute", function() 
{
  var selection = comboBox.getChildControl('dropdown').getSelection();
  if(selection.getLength())
  {
    this.debug('Here is your id', selection.getItem(0).getId());  
  }
}, this);

var setButton = new qx.ui.form.Button("Set id:2");
this.getRoot().add(setButton, {'left': 200, 'top': 50});

setButton.addListener("execute", function() 
{
  // don't replace selection object as it's used internally
  var selection = comboBox.getChildControl('dropdown').getSelection();
  selection.push(model.getPersonal().getItem(1));
}, this);

更新

如果您需要通过 id 或另一个项目的属性 select 一个项目，qx.data.Array 不会直接帮助您，因为它是一个数组，而不是字典。您必须选择：

预先计算id -> index映射，稍后使用：

var mapping = data['personal'].reduce(function(result, item, index)
{
  result[item['id']] = index;
  return result;
}, {});
var selection = model.getPersonal().getItem(mapping['2']);

或按需过滤数据数组：

var selection = model.getPersonal().filter(function(item)
{
  return item.getId() == '2';
});

如果你的名单很大并且经常 selection 那么前者更可取。

qooxdoo qx.ui.form.VirtualComboBox 键值对

qooxdoo qx.ui.form.VirtualComboBox key value pairs

javascript

data-binding

qooxdoo

更新