javascript - qooxdoo qx.ui.form.VirtualComboBox 键值对

Question

我想知道在 qooxdoo qx.ui.form.VirtualComboBox 中是否有使用键、值对的首选方法。我希望在文本框中设置名称，但在请求时应返回 id。我见过的这个小部件的所有示例都仅使用该值。我发布了如何解决问题的代码，但我想知道是否有更好/首选的使用数据绑定(bind)的方法。到目前为止，每次我需要值或键时，我都会循环遍历模型以找到匹配项。这是 Playground 示例: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';
});

如果您的列表很大并且选择频繁，那么前者是更好的选择。