Comment refléter le changement de l'enfant au parent dans Polymer

Le code actuel est ci-dessous. J'ai une valeur d'élément dans le fichier principal. Cette valeur est transmise à l'élément-élément elements des éléments enfants et de là à app-element-add.Comment refléter le changement de l'enfant au parent dans Polymer

La valeur change dans app-element-add. Mais je ne peux pas obtenir la valeur reflétée dans l'élément principal.

Les observateurs ne sont jamais invoqués.

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-élément add.html

Polymer({ 

    is: 'app-element-add', 

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

Tous les conseils sur la façon de tenir compte des changements dans app- element-add dans app-main-element. Merci.

Source

2016-06-29 user2536851

Vous n'avez pas besoin d'utiliser reflectToAttribute ici. La seule option requise ici est notify. Cependant, votre code actuel fonctionne:

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

Source

2016-06-30 01:51:35 tony19

Comment refléter le changement de l'enfant au parent dans Polymer

Répondre

Questions connexes