Как отразить изменение от ребенка к родительскому в Polymer

Текущий код ниже. У меня есть значение element в главном файле. Это значение передается дочернему элементу app-element, а оттуда - в app-element-add.Как отразить изменение от ребенка к родительскому в Polymer

Значение изменяется в 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. Благодарю.

источник

2016-06-29 user2536851

Здесь не обязательно использовать 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

источник

2016-06-30 01:51:35 tony19

Как отразить изменение от ребенка к родительскому в Polymer

ответ

Смежные вопросы