Polymer 1.x: 纸质菜单

Question

我想观察paper-menu中的选中项。

我希望看到所选项目的列表。相反，我在文档中看到白色 space，在控制台中看到 undefined。

通过以下步骤重现问题：

Open this jsBin
Select 一项、两项或三项。
❌观察PRINT TO CONSOLE按钮上面的space没有显示选中项列表
单击标有 打印到控制台
❌观察控制台日志："selected" undefined

http://jsbin.com/xukegadata/edit?html,控制台,输出

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-selector/iron-selector.html" rel="import">
  <link href="paper-button/paper-button.html" rel="import">
  <link href="paper-menu/paper-menu.html" rel="import">
  <link href="paper-item/paper-item.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style>
    iron-selector > * {
      padding: 8px;
    }
    .iron-selected {
      background-color: blue;
      color: white;
    }
  </style>

  <template is="dom-repeat" items="{{selected}}">
    <div>[[item]]</div>
  </template>

  <br /><br /><br />
  <paper-button on-tap="_show">
    Print to Console
  </paper-button>
  <br /><br />

  <paper-menu multi
              selected="{{selected}}"
              xselected="{{selected}}"
              xselectedItems="{{selected}}"
              xselectedValues="{{selected}}"
              >
    <paper-item>Foo</paper-item>
    <paper-item>Bar</paper-item>
    <paper-item>Baz</paper-item>
    <paper-item>Qux</paper-item>
    <paper-item>Quux</paper-item>
  </paper-menu>


</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        selected: {
          type: Array,
          notify: true,
        }
      },
      _show: function() {
        console.log('selected', this.selected);
      },
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Answer 1

使用 multi 时，请使用 selectedValues 或 selectedItems 而不是 selected。请记住，当将驼峰式属性称为属性时，您必须使用破折号（selected-values 代表 selectedValues）。

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="paper-button/paper-button.html" rel="import">
  <link href="paper-menu/paper-menu.html" rel="import">
  <link href="paper-item/paper-item.html" rel="import">
</head>
<body>

<x-element></x-element>

<dom-module id="x-element">
<template>
  <style>
    iron-selector > * {
      padding: 8px;
    }
    .iron-selected {
      background-color: blue;
      color: white;
    }
  </style>
  <paper-button raised on-tap="_show">Print to Console</paper-button>
  <br><br>
  <paper-menu multi selected-values="{{selected}}">
    <paper-item>Foo</paper-item>
    <paper-item>Bar</paper-item>
    <paper-item>Baz</paper-item>
    <paper-item>Qux</paper-item>
    <paper-item>Quux</paper-item>
  </paper-menu>
  <br><br>
  <template is="dom-repeat" items="{{selected}}">
    <div>[[item]]</div>
  </template>
</template>
<script>
  Polymer({
    is: "x-element",
    _show: function() {
      console.log('selected', this.selected);
    }
  });
</script>
</dom-module>
</body>

Polymer 1.x: 纸质菜单

Polymer 1.x: paper-menu

polymer

paper-elements

polymer-1.0