更新

Question

我想知道在qooxdoo qx.ui.form.VirtualComboBox中是否存在使用键值对的首选方法。我希望在文本框中设置名称，但是在请求时应返回id。我见过的这个小部件的所有示例都只使用了值。我发布代码我是如何处理问题的，但我想知道是否有更好/更喜欢的方式使用数据绑定。到目前为止，每当我需要值或键时，我会遍历模型以找到匹配项。以下是游乐场示例：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具有正常的选择数据数组。尽管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或其他项目的属性选择项目，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';
});

如果你有大名单和经常选择，那么前者更可取。

qooxdoo qx.ui.form.VirtualComboBox键值对

1 个答案:

更新