Wie spiegelt sich die Änderung von Kind zu Eltern in Polymer

Der aktuelle Code ist unten. Ich habe Element-Wert in der Hauptdatei. Dieser Wert wird an das untergeordnete Element app-element und von dort an app-element-add übergeben.Wie spiegelt sich die Änderung von Kind zu Eltern in Polymer

Der Wert ändert sich in app-element-add. Aber ich kann den Wert nicht im Hauptelement finden.

Die Beobachter werden nie aufgerufen.

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 
    } 
    });

Irgendwelche Hinweise, wie Veränderungen in der app- widerzuspiegeln Element-Hinzufügen in App-Hauptelement. Vielen Dank.

Quelle

2016-06-29 user2536851

Sie brauchen reflectToAttribute hier nicht zu verwenden. Die einzige erforderliche Option ist notify. Jedoch Ihre aktuellen Code funktioniert:

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

Quelle

2016-06-30 01:51:35 tony19

Wie spiegelt sich die Änderung von Kind zu Eltern in Polymer

Antwort

Verwandte Themen