Javascript 如何在点击按钮时填充聚合物下拉菜单?
我的HTML页面中有一个Javascript 如何在点击按钮时填充聚合物下拉菜单?,javascript,html,polymer,Javascript,Html,Polymer,我的HTML页面中有一个polymer下拉菜单元素,如下所示: <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.p
polymer下拉菜单
元素,如下所示:
<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>
{{}}
开始
聚合物({
已创建:函数(){
},
domReady:function(){
this.processlist=[“嗨”,“你好”];
var self=这个;
这个.$.start_按钮。addEventListener('click',函数(){
this.processlist=[“嘿”,“你好”,“你在吗”,“你”];
});
});
}
});
我需要在单击按钮时填充processlist。我在按钮的事件侦听器函数中编写代码来更新进程列表,但这不起作用
我能够显示一个静态的值数组,但不能在单击按钮时动态显示
任何帮助都将不胜感激。我对HTML、JavaScript,当然还有polymer都是新手。也许我错了,但处理程序中的“this”上下文似乎不正确。 我已经创建了代码snipet,其目的是通过点击按钮来显示生成的列表,试试看
<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>
填充列表
{{}}
聚合物(“my-element”{
onInvoke:function(){
this.processlist=['a','b'];
}
});
你能用更多的代码更新以再现你的问题吗?我更新了这里的代码,在JSFIDLE上遇到了一些问题。谢谢Sergey,我缺少Polymer('my-element',{在我的代码中,并且绑定了一个元素,比如on-tap=“{{onInvoke}}”,所以修复了它。