Question

以下是两种聚合物元素
1. cc-dropdown
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>

纸张下拉菜单中有一个属性value，只要您更改下拉列表，该属性就会更改。

根据有关价值属性的文件：

将在何时使用的此元素的值提交表格。它是只读的，并且总是一样的值为selectedItemLabel。

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

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

Answer 3

结果证明这是我的不好，下面是在父组件产品页面中使用cc-dropdown的方法，它将更改反映回父级。

应选择属性值 - 数据（未选中）
属性必须如上所述“ - ” selectedData应作为selected-data

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

聚合返回下拉选择的值返回到父元素

3 个答案: