Как отразить переход от ребенка к родителю в Polymer

Текущий код ниже. У меня есть элемент-значение в главном файле. Это значение передается дочернему элементу 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'
    } 
  });

приложение-element.html

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

  is: 'app-element',

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

приложение-элемент-add.html

Polymer({

  is: 'app-element-add',

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

Любые советы о том, как отразить изменения в app-element-add в app-main-element. Благодарю.

Источник

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

Источник
Другие вопросы по тегам