Question

我是网络开发的新手，我正在尝试学习使用聚合物来创建一个简单的网页。我创建了一个下拉菜单，该菜单由json文件中的名称填充，类似于下面的示例。我无法理解如何显示与所选菜单项关联的数据。下面是聚合物项目的演示代码。我理解这个问题对你们中的一些人来说似乎很简单。提前感谢您的耐心和可能提供的任何帮助。

  <paper-menu-button>
    <paper-icon-button icon="menu" noink></paper-icon-button>
    <paper-dropdown class="dropdown">
      <core-menu class="menu">
        <template repeat="{{name in food}}">
          <paper-item>{{}}</paper-item>
        </template>
      </core-menu>
    </paper-dropdown>
  </paper-menu-button>

Answer 1

有几种方法可以检查用户输入的菜单。

方法1 您可以使用EventListener查找core-select事件。要做到这一点，你会给核心菜单一个id。我叫它选择。这将使函数看起来像

this.$.select.addEventListener('core-select', function () {
  // access the value with this.selected
});

方法2 您也可以使用EventListener使用声明方法，但这次作为属性on-core-select="{{selectAction}}"，然后函数看起来像。

 selectAction: function () {
   // value would be this.$.select.selected if using the select id on the core-menu
 }

方法3 您还可以使用属性更改函数来获取更改时的值。该方法看起来像。

<paper-menu-button>
  <paper-icon-button icon="menu" noink></paper-icon-button>
  <paper-dropdown class="dropdown">
    <core-menu class="menu" selected="{{selected}}">
      <template repeat="{{name in food}}">
        <paper-item>{{}}</paper-item>
      </template>
    </core-menu>
  </paper-dropdown>
</paper-menu-button>

更改会调用类似

的函数

selectedChanged: function () {
  // value would be this.selected
}

在选择http://plnkr.co/edit/odQwNRLFTzyATodQUNh0?p=preview时，我还制作了一个能够显示所有3个使用中检查控制台输出的插件

编辑：所有这一切都假设您在自定义元素中工作。在自定义元素方法1之外仍然可以工作。方法2和3需要自动绑定模板

Answer 2

我对Polymer来说也很新，但是我有这样的标签（我认为它也适用于下拉菜单）：

在普通网页中：

<body>

<template is="dom-bind" id="app">
    <div class="container">
        <div class="menu-area">
            <paper-tabs selected="{{selected}}" on-iron-select="_onTabSelected">
                <template is="dom-repeat" items="[[items]]">
                    <paper-tab>[[item.name]]</paper-tab>
                </template>
            </paper-tabs>
        </div>
    </div>
</template>

<script>
    app._onTabSelected = function (e) {
        var selectedIndex = e.srcElement.selected;
        var item = this.items[selectedIndex];
        document.location = item.uri;
    };

    app.items = [
        {id: 'HOME', name: 'Home', uri: "home.html"},
        {id: 'PRODUCTS', name: 'Products', uri: "products.html"},
        {id: 'USERS', name: 'Users', uri: "users.html"}
    ];

</script>


</body>
</html>

撰写新元素时：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">

<dom-module id="app-header-menu">

    <template>

        <div class="container">
            <div class="menu-area">
                <paper-tabs selected="{{selected}}" on-iron-select="_onTabSelected">
                    <template is="dom-repeat" items="[[items]]"><paper-tab>[[item.name]]</paper-tab></template>
                </paper-tabs>
            </div>
        </div>

    </template>

    <script>
        Polymer({
            is: "app-header-menu",

            properties: {
                items: {
                    type: Array,
                    notify: false,
                    readOnly: false,
                    value: [
                        {id: 'HOME', name: 'Home', uri: "home.html"},
                        {id: 'PRODUCTS', name: 'Products', uri: "products.html"},
                        {id: 'USERS', name: 'Users', uri: "users.html"}
                    ]
                }
            },

            _onTabSelected: function (e) {
                var selectedIndex = e.srcElement.selected;
                var item = this.items[selectedIndex];
                document.location = item.uri;
            }

        });

    </script>

</dom-module>

聚合物纸菜单按钮

2 个答案: