如何扩展可重复使用的自定义元素列表的paper-dropdown菜单?

问题描述

我有一个时区列表，需要将其作为可重用组件.如何使时区列表成为Polymer中的可重用组件?我需要此自定义元素来提供是否选择了时区(isSelected)以及用于获取所选时区名称的函数或属性.

I have a list of time zones that needs to be a reusable component. How do I make my list of time zones a reusable component in Polymer? I need this custom element to provide whether a time zone was selected (isSelected) and a function or property to get the selected time zone name.

这让我发疯了！

先谢谢了.下面是一个名为"time-zones.html"的组件文件.我删除了我正在尝试的所有BS JavaScript，因为显然它无法正常工作.唯一起作用的是列表的加载.

Thanks in advance. Below is a component file called, 'time-zones.html'. I removed all the BS JavaScript I was trying because clearly it wasn't working. The only thing working is the loading of the list.

<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-dropdown/paper-dropdown.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../paper-item/paper-item.html">


<polymer-element name="lt-timezones-input" attributes="timezones">
    <template>
        <style>
            paper-dropdown-menu {
              box-sizing: border-box;
              width: 100%;
            }

            core-menu {
              box-sizing: border-box;
              width: 90%;
            }

            paper-item {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
        </style>
        <paper-dropdown-menu id="ddl" label="Time Zone">
            <paper-dropdown class="dropdown">
                <core-menu class="menu">
                    <template id="list" repeat="{{timezones}}">
                      <paper-item>{{}}</paper-item>
                    </template>
                </core-menu>
            </paper-dropdown>
        </paper-dropdown-menu>
        <!-- shadow DOM here -->
    </template>
    <script>
        Polymer('lt-timezones-input', {
            created: function () {

                this.timezones = [
                    'Eastern Standard Time',
                    'Central Standard time',
                    'Mountain Standard Time',
                    'Pacific Standard Time'
                ];
            }
        });
    </script>
</polymer-element>

推荐答案

以下是一种可能的解决方案:随便

Here is one possible solution: Plunk

此处使用了core-select 事件.

<paper-dropdown-menu on-core-select="{{item_changed}}">

这篇关于如何扩展可重复使用的自定义元素列表的paper-dropdown菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！