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

时间:2013-07-17 07:48:37

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

如何从select combomenuitem中获取对象...?我试过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>

enter image description here

2 个答案:

答案 0 :(得分:1)

您可以使用goog.ui.component中定义的getModel,它可以通过原型继承在ComboBoxitem中使用

goog.Disposable&gt;&gt; goog.events.EventTarget&gt;&gt; goog.ui.Component&gt;&gt; goog.ui.Control&gt;&gt; goog.ui.MenuItem&gt;&gt; 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]

答案 1 :(得分:0)

在示例代码中,事件侦听器附加到ComboBox,无法找到获取当前所选ComboBoxItem的任何方法,并且该模型已附加到该模板。所以问题是:“如何在Combobox上附加更改事件时访问ComboBoxItem?”我希望indexselectedItemIndex或类似的东西。

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

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