Polymer return 下拉选中值返回父元素

Question

下面是两个聚合物元素
1. 抄送下拉
2。产品页面
product-page 在这里是父元素，它没有从子元素那里获取更改后的值 {{selectedData}}，它只是从一开始就为空值。

我是不是遗漏了什么？

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="cc-dropdown">
  <template>
    {{selectedData}}
    <paper-dropdown-menu label="Environment">
      <paper-menu id="ccdropdown" class="dropdown-content" attr-for-selected="value" selected="{{selectedData}}">
        <template is="dom-repeat" items="{{data}}">
          <paper-item value="{{item}}">{{item}}</paper-item>
        </template>
      </paper-menu>
    </paper-dropdown-menu>
  </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'cc-dropdown',
        properties: {
          selectedData: {
            notify: true,
            reflectToAttribute: true
          }
        }
      });
    })();
  </script>
</dom-module>

---------------

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="cc-product-page">
  <template>
    {{selectedData}}
    <cc-dropdown data="{{Env}}" selected="{{selectedData}}"></cc-dropdown>
  </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'cc-product-page',

        properties: {
          Env: {
            type: Array,
            value: ["STAGE", "QA", "PROD"],
            notify: true
          }
        }
      });
    })();
  </script>

</dom-module>

Answer 1

{{selectedData}} 需要在它自己的 html 元素中。请尝试 <span>{{selectedData}}</span>。

Answer 2

正如@Michael.Lumley 所说，您应该在自己的 HTML 元素中包含 {{selectedData}}，正如他所展示的那样。

我认为一个更干净的解决方案是改变这个：

 <template>
    {{selectedData}}
    <paper-dropdown-menu label="Environment">
      <paper-menu id="ccdropdown" class="dropdown-content" attr-for-selected="value" selected="{{selectedData}}">
        <template is="dom-repeat" items="{{data}}">
          <paper-item value="{{item}}">{{item}}</paper-item>
        </template>
      </paper-menu>
    </paper-dropdown-menu>
  </template>

为此：

 <template>
    <span>{{selectedData}}</span>
    <paper-dropdown-menu label="Environment" value="{{selectedData}}">
      <paper-menu id="ccdropdown" class="dropdown-content">
        <template is="dom-repeat" items="{{data}}">
          <paper-item>{{item}}</paper-item>
        </template>
      </paper-menu>
    </paper-dropdown-menu>
  </template>

paper-dropdown-menu 有一个属性、value，只要你改变下拉菜单，它就会改变。

根据有关值属性的文档：

The value for this element that will be used when submitting in a form. It is read only, and will always have the same value as selectedItemLabel.

selectedItem 属性将 return 整个 paper-item 元素，这可能不是您想要的。

注意：我不确定您从哪里得到 {{item}}（打字错误？）。

Answer 3

原来是我的问题，下面是在父组件product-page中使用cc-dropdown的方式，将变化反映回父

属性值应该是selected-data（未选择）
属性必须有“-”如上 selectedData 应作为 selected-data

<cc-dropdown id="envOptions" data="{{Env}}" selected-data="{{selectedData}}"></cc-dropdown>

Polymer return 下拉选中值返回父元素

Polymer return drop-down selected value back to parent element

polymer

polymer-1.0