1

ロード時paper-dropdown-menuに を の値に設定したい。要素の登録時に設定された、呼び出された要素のサブプロパティに'Three'value 属性をデータバインドすることで、これを行いたいと思います。以下のコードを使用してこれを試みると、表示された値が「Three」ではなく空白になっていることがわかります。paper-dropdown-menuitem.numberpaper-dropdown-menu

目的の動作を実現するには、どのコードを変更すればよいですか?

問題を再現するには、次の手順に従います。

  1. この JSBinを開きます。
  2. ドロップダウン メニューの表示値の内容が空白であることに注意してください。
  3. というラベルの付いたボタンをクリックしますClick to show item
  4. コンソールの出力を確認します。

    [オブジェクト オブジェクト] {番号: "3" }

  5. 上記の手順は、目的の動作が発生していないことを示していることを理解してください。
  6. ドロップダウン メニューで「4」という数字を選択します。
  7. というラベルの付いたボタンをクリックしますClick to show item
  8. コンソールの出力を確認します。

    [オブジェクト オブジェクト] {番号: "4" }

  9. 上記の手順は、一方向のデータ バインディングが要素で機能していることを示しています。

どうすれば目的の動作を実現できますか?

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>
4

1 に答える 1

1

<paper-dropdown-menu>の値プロパティが読み取り専用であるため、コードは機能しません。ドキュメントを参照してください。

代わりに、にバインドできます<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選択可能な要素に属性を追加し、 のattrForSelectedプロパティを使用しますpaper-listbox。

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>

于 2016-09-04T17:56:37.330 に答える