聚合物纸菜单按钮答案

【问题标题】：Polymer paper menu button聚合物纸菜单按钮
【发布时间】：2015-09-21 05:44:49
【问题描述】：

我对 Web 开发非常陌生，正在尝试学习使用聚合物来创建一个简单的网页。我创建了一个下拉菜单，由 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>

【问题讨论】：

标签： polymer

【解决方案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
}

我还制作了一个plunker，在选择 @987654321 @

时，显示了所有3个使用检查控制台以进行输出

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

【讨论】：

【解决方案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>

【讨论】：