Polymerの子から親への変更を反映する方法

現在のコードは以下の通りです。私はメインファイルに要素値を持っています。この値は、子要素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-の変更を反映する方法上の任意のヒントapp-main-element内のelement-add。ありがとう。

出典

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の子から親への変更を反映する方法

答えて

関連する問題