Question

我想在加载时将paper-dropdown-menu设置为'Three'的值。我想通过数据绑定paper-dropdown-menu的value属性到名为item.number的元素的子属性来实现这一点，该属性在注册元素时设置。当我使用下面的代码尝试这个时，我看到的结果是paper-dropdown-menu显示的值只是空白而不是读“三”。

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

按照以下步骤重现问题。

Open this JSBin。
请注意，下拉菜单的显示值内容为空白。
点击标有点击显示项目
观察控制台打印：

[object Object] { 第三” }
了解上述步骤表明我的行为没有发生。
在下拉菜单中选择数字“四”。
点击标有点击显示项目
观察控制台打印：

[object Object] { 排名第四” }
理解上面的步骤显示单向数据绑定正在处理元素。

我如何实现我想要的行为？

<!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>的value属性是只读的。请参阅documentation。

相反，您可以绑定到<paper-listbox selected>。只需进行少量更改，您就必须绑定到dropdown的元素索引。

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中保留全名，您可以为可选元素添加属性，并使用attrForSelected的{{1}}属性。

paper-listbox

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

Polymer 1.x：用于纸张下拉菜单的双向数据绑定

1 个答案: