Polymer 1.x：paper-dropdown-menu 的双向数据绑定

Question

我想在加载时将 paper-dropdown-menu 设置为 'Three' 的值。我想通过将 paper-dropdown-menu 的值属性数据绑定到名为 item.number 的元素的子属性来完成此操作，该元素在注册元素时设置。当我使用下面的代码尝试这样做时，我看到的结果是 paper-dropdown-menu 显示的值只是空白而不是读取 'Three'.

哪些代码更改可以实现我想要的行为？

按照以下步骤重现问题。

Open this JSBin.
注意下拉菜单的显示值内容为空
单击标记为 单击以显示项目
观察控制台打印：

[object Object] { number: "Three" }
了解上述步骤证明我想要的行为没有发生。
Select 下拉菜单中的数字 "Four"。
单击标记为 单击以显示项目
观察控制台打印：

[object Object] { number: "Four" }
了解上述步骤表明单向数据绑定正在元素上工作。

我怎样才能达到我想要的行为？

http://jsbin.com/loceqayezo/1/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="paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
  <link href="paper-listbox/paper-listbox.html" rel="import">
  <link href="paper-item/paper-item.html" rel="import">
</head>
<body>

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

<template>
  <style></style>

  <p>
    <button on-tap="show">Click to show item</button>
  </p>

  <paper-dropdown-menu label="Numbers"
                       value="{{item.number}}">
    <paper-listbox class="dropdown-content">
      <paper-item>One</paper-item>
      <paper-item>Two</paper-item>
      <paper-item>Three</paper-item>
      <paper-item>Four</paper-item>
    </paper-listbox>
  </paper-dropdown-menu>


</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        item: {
          type: Object,
          notify: true,
          value: function() {
            return {number: "Three"};
          },
        },
      },
      show: function() {
        console.log('item', this.item);
      },
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Answer 1

您的代码无效，因为 <paper-dropdown-menu> 的值属性是只读的。见 documentation.

相反，您可以绑定到 <paper-listbox selected>。通过最小的更改，您将必须绑定到下拉列表的元素索引。

Polymer({
      is: "x-element",
      properties: {
        item: {
          type: Object,
          notify: true,
          value: function() {
            return {number: 2};
          },
        },
      },
      show: function() {
        console.log('item', this.item);
      },
    });

<!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="paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
  <link href="paper-listbox/paper-listbox.html" rel="import">
  <link href="paper-item/paper-item.html" rel="import">
</head>
<body>

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

<template>
  <style></style>

  <p>
    <button on-tap="show">Click to show item</button>
  </p>

  <paper-dropdown-menu label="Numbers">
    <paper-listbox class="dropdown-content" 
                   selected="{{item.number}}">
      <paper-item>One</paper-item>
      <paper-item>Two</paper-item>
      <paper-item>Three</paper-item>
      <paper-item>Four</paper-item>
    </paper-listbox>
  </paper-dropdown-menu>
  

</template>
</dom-module>

<x-element></x-element>

</body>

要在 item 中保留全名，您可以向可选择的元素添加一个属性，并使用 paper-listbox 的 attrForSelected 属性。

Polymer({
      is: "x-element",
      properties: {
        item: {
          type: Object,
          notify: true,
          value: function() {
            return {number: "Three"};
          },
        },
      },
      show: function() {
        console.log('item', this.item);
      },
    });

<!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="paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
  <link href="paper-listbox/paper-listbox.html" rel="import">
  <link href="paper-item/paper-item.html" rel="import">
</head>
<body>

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

<template>
  <style></style>

  <p>
    <button on-tap="show">Click to show item</button>
  </p>

  <paper-dropdown-menu label="Numbers">
    <paper-listbox class="dropdown-content" 
                   selected="{{item.number}}"
                   attr-for-selected="data-item">
      <paper-item data-item="One">One</paper-item>
      <paper-item data-item="Two">Two</paper-item>
      <paper-item data-item="Three">Three</paper-item>
      <paper-item data-item="Four">Four</paper-item>
    </paper-listbox>
  </paper-dropdown-menu>
  

</template>
</dom-module>

<x-element></x-element>

</body>

Polymer 1.x：paper-dropdown-menu 的双向数据绑定

Polymer 1.x: Two-way databinding for paper-dropdown-menu

polymer

polymer-1.0

paper-elements

jsbin