如何在 Polymer 中反映从 child 到 parent 的变化

Question

当前代码如下。我在主文件中有 element-value。该值被传递到 child 元素 app-element 并从那里传递到 app-element-add.

数值变化在app-element-add。但是我无法获取主元素中反映的值。

永远不会调用观察者。

main.html

<app-element element-value = {{ elementValue }}></app-element>

Polymer({

  is: 'app-main-element',

  properties: {
    elementValue: {
      type:Array,
      notify:true,
      observer:'listUpdated'
    } 
  });

app-element.html

<app-element-add element-value = {{ elementValue }}></app-element-add>
 Polymer({

  is: 'app-element',

  properties: {
    elementValue: {
      type:Array,
      notify:true,
      observer:'listUpdated'
    } 
  });

app-element-add.html

Polymer({

  is: 'app-element-add',

  properties: {
    elementValue: {
      type:Array,
      notify:true,
      reflectToAttribute:true
    } 
  });

有关如何反映 app-element 中更改的任何提示 - 添加到 app-main-element 中。谢谢。

Answer 1

这里不需要使用reflectToAttribute。此处唯一需要的选项是 notify。但是，您当前的代码有效：

HTMLImports.whenReady(_ => {
  "use strict";

  Polymer({
    is: 'app-main-element',
    properties : {
      elementValue: {
        type: Array,
        notify: true,
        observer: 'listUpdated',
        value: _ => [100,200,300]
      }
    },
    listUpdated: function() {
      console.log('[app-main-element] list updated');
    },
    ready: function() {
      console.log('[app-main-element] ready');
    }
  });

  Polymer({
    is: 'app-element',
    properties : {
      elementValue: {
        type: Array,
        notify: true,
        observer: 'listUpdated'
      }
    },
    listUpdated: function() {
      console.log('[app-element] list updated');
    },
    ready: function() {
      console.log('[app-element] ready');
    }
  });

  Polymer({
    is: 'app-element-add',
    properties : {
      elementValue: {
        type: Array,
        notify: true
      }
    },
    ready: function() {
      console.log('[app-element-add] ready (will set elementValue in 1000ms)');

      this.async(_ => {
        console.log('[app-element-add] updating elementValue');
        this.elementValue = [1,2,3];
      }, 1000);
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.11.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <app-main-element></app-main-element>

  <dom-module id="app-main-element">
    <template>
      <app-element element-value={{elementValue}}></app-element>
      <div>app-main-element.elementValue = [[elementValue]]</div>
    </template>
  </dom-module>

  <dom-module id="app-element">
    <template>
      <app-element-add element-value={{elementValue}}></app-element-add>
      <div>app-element.elementValue = [[elementValue]]</div>
    </template>
  </dom-module>

  <dom-module id="app-element-add">
    <template>
      <div>app-element-add.elementValue = [[elementValue]]</div>
    </template>
  </dom-module>
</body>

codepen

如何在 Polymer 中反映从 child 到 parent 的变化

How to reflect change from child to parent in Polymer

2-way-object-databinding

polymer

polymer-1.0