谷歌关闭工具组合框获取模型答案

【问题标题】：google closure tool combo box get model谷歌关闭工具组合框获取模型
【发布时间】：2013-07-17 07:48:36
【问题描述】：

如何从选择的组合菜单项中获取对象...？我试过 e.target.getMenu().getModel()

</html>
<head>
  <title>goog.ui.ComboBox</title>
   <script src="closure-library/closure/goog/base.js"></script>
  <script>

    goog.require('goog.events');
    goog.require('goog.ui.ComboBox');
     goog.require('goog.dispose');
    goog.require('goog.dom');
  var test;
  </script>

  <style>

  html, body {
    overflow:hidden;
    margin: 0;
    padding: 5px;
  }

  #c {
    margin-bottom: 10px;
    font-size: small;
  }

  /* Size the combobox so that it is sufficiently small to demonstrate the menu
     being positioned to left-align with the control. */
  .goog-combobox input {
    width: 100px;
  }

  fieldset {
    display: inline-block;
    margin: 10px;
    text-align: initial;
  }
  </style>
</head>
<body>

  <div id="c">cb.value = '<span id="v"></span>'</div>

  <fieldset style="float:left">
    <legend>LTR</legend>
    <div class="combo"></div>
  </fieldset>

    <script type="text/javascript">
  function createTestComboBox() {
    var cb = new goog.ui.ComboBox();

    cb.setUseDropdownArrow(true);
    cb.setDefaultText('Select a folder...');
    cb.addItem(new goog.ui.ComboBoxItem('Inbox',{"a":1}));
    cb.addItem(new goog.ui.ComboBoxItem('Bills & statements',{"b":2}));
    cb.addItem(new goog.ui.ComboBoxItem('Cal alumni',{"c":3}));
    cb.addItem(new goog.ui.ComboBoxItem('Calendar Stuff',{"d":4}));
    cb.addItem(new goog.ui.ComboBoxItem('Design',{"e":5}));
    cb.addItem(new goog.ui.ComboBoxItem('Music',{"f":6}));
    cb.addItem(new goog.ui.ComboBoxItem('Netflix',{"g":7}));
    cb.addItem(new goog.ui.ComboBoxItem('Personal',{"h":8}));
    cb.addItem(new goog.ui.ComboBoxItem('Photos',{"i":9}));
    cb.addItem(new goog.ui.ComboBoxItem('Programming languages',{"j":10}));
     return cb;
  }

  var controls = [];
  var containerEls = goog.dom.getElementsByClass(goog.getCssName('combo'));
  for (var i = 0; i < containerEls.length; i++) {
    var cb = createTestComboBox();
    cb.render(containerEls[i]);
    goog.events.listen(cb, 'change', handleChangeEvent);
    controls.push(cb);
  }

  function handleChangeEvent(e) {
    test=e;
    goog.dom.setTextContent(document.getElementById('v'), e.target.getValue());
  }

  window.onbeforeunload = function() {
    goog.disposeAll(controls);
  };

  </script>
</body>
</html>

【问题讨论】：

标签： javascript google-closure google-closure-library google-closure-templates

【解决方案1】：

您可以使用在 goog.ui.component 中定义的getModel，它应该可以通过原型继承提供给 ComboBoxitem

goog.Disposable >> goog.events.EventTarget >> goog.ui.Component >> goog.ui.Control >> goog.ui.MenuItem >> goog.ui.ComboBoxItem

goog.ui.Component.prototype.getModel = function() {
  return this.model_;
};

https://code.google.com/p/closure-library/source/browse/closure/goog/ui/component.js

文档 - http://docs.closure-library.googlecode.com/git/class_goog_ui_ComboBoxItem.html [查找 GetModel]

【讨论】：

【解决方案2】：

在示例代码中，事件侦听器附加到 ComboBox，找不到任何方法来获取当前选定的 ComboBoxItem，而这是模型附加到的。所以问题是：“如何在 Combobox 上附加更改事件时访问 ComboBoxItem？”我希望index 或selectedItemIndex 或类似的东西。

goog.events.listen(cb, 'change', handleChangeEvent);
// inside event handler
e.target===this;//true
//second item was clicked:
this === cb;//true
cb.getItemAt(1).getValue();//prints the model object
                           // but ComboBox has no selectedItemIndex
                           // or something helpful to get the ComboBoxItem

如果他们可以在演示或单元测试中提供一个工作示例，那将很有帮助，更多人将能够使用它。因为现在很难弄清楚这个大部分没有文档的库。

【讨论】：