【问题标题】:How to populate polymer-dropdown-menu on click of a button?如何在单击按钮时填充聚合物下拉菜单?
【发布时间】:2015-03-12 13:04:05
【问题描述】:

我的 HTML 页面中有一个 polymer-dropdown-menu 元素,如下所示:

   <script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-dropdown-menu/paper-dropdown-menu.html">
    <link rel="import" href="http://www.polymer-project.org/components/paper-dropdown/paper-dropdown.html">
 <link rel="import" href="http://www.polymer-project.org/components/core-menu/core-menu.html">  
 <polymer-element name="sample">
     <template>
         <div>
<paper-dropdown-menu id="Combo" label="Process">
    <paper-dropdown class="dropdown">
        <core-menu class="menu">
            <template repeat="{{processlist}}">
                <paper-item>{{}}</paper-item>
            </template>
        </core-menu>
    </paper-dropdown>
</paper-dropdown-menu>
         </div>
         <div>
             <paper-button id="start_button" raised>Start</paper-button>   
         </div>         
         </template>

  <script>
  Polymer({
    created: function() {    
    },
    domReady: function() {
      this.processlist = ["hi","hello"];                   
      var self = this;
      this.$.start_button.addEventListener('click', function () {  
       this.processlist=["hey","how","are","you"];        
      });
      });
    }
  }); 
  </script>
     </polymer-element>

我需要在单击按钮时填充进程列表。我在按钮的事件侦听器函数中编写代码来更新进程列表,但这不起作用。

我能够显示静态值数组,但不能在单击按钮时动态显示。

任何帮助将不胜感激。我对 HTML、JavaScript,当然还有聚合物还很陌生。

【问题讨论】:

  • 你能用更多代码更新this JSFiddle 来重现你的问题吗?
  • 我在这里更新了代码,JSFiddle 遇到了一些问题。

标签: javascript html polymer


【解决方案1】:

也许我错了,但看起来你在处理程序中有不正确的“this”上下文。 There我创建了代码片段,目的相同,通过单击按钮显示生成的列表,试试吧。

<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.5.5/polymer.min.js"></script>
<polymer-element name="my-element" constructor="" attributes="">
    <template>
        <paper-button label="Submit" on-tap="{{onInvoke}}" affirmative autofocus>Populate list</paper-button>
        <br/>
        <paper-dropdown-menu id="Combo" label="Process">
            <paper-dropdown class="dropdown">
                <core-menu class="menu">
                    <template repeat="{{processlist}}">
                        <paper-item>{{}}</paper-item>
                    </template>
                </core-menu>
            </paper-dropdown>
        </paper-dropdown-menu>
    </template>
    <script>
        Polymer('my-element', {
            onInvoke: function() {
                this.processlist = ['a', 'b'];
            }
        });
    </script>
</polymer-element>
<my-element></my-element>

【讨论】:

  • 感谢 Sergey,我在我的代码中缺少 Polymer('my-element', { 并绑定到像 on-tap="{{onInvoke}}" 这样的元素,以便修复它。
猜你喜欢
  • 2013-05-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多