Polymer：親コンポーネントからのオブジェクトプロパティの変更を検出する

Question

firebase-documentを使用してFirebaseからオブジェクトをロードするコンポーネントがあります。そのオブジェクトは子コンポーネントに渡されます。子コンポーネント内のオブジェクトを変更すると、変更は親プロセスで検出されないため、オブジェクトはFirebaseで更新されません。

<dom-module id="some-component"> 

    <template> 

    <firebase-document path="/projects/[[project_id]]" data="{{project}}"></firebase-document> 

    <some-child project="{{project}}"></some-child> 

    </template> 

    <script> 
    Polymer({ 
     is: 'some-component', 
     properties: { 
     project: {type: Object, notify: true, observer: "projectChanged"} 
     }, 
     projectChanged: function() { 
     console.log("we've detected some changes!"); 
     } 
    }); 
    </script> 

</dom-module> 

そして、ここでは、子コンポーネントである：ここで

は、主成分である

<dom-module id="some-child"> 

    <template> 

    <a on-tap="changeProject">Let's change some property on our project!</a> 

    </template> 

    <script> 
    Polymer({ 
     is: 'some-child', 
     properties: { 
     project: {type: Object, notify: true} 
     }, 
     changeProject: function() { 
     this.project.name = "A new name"; // this never propagates back to the parent component 
     } 
    }); 
    </script> 

</dom-module> 

予想される動作は、私がリンクをクリックしたとき、オブジェクトのプロパティは、それを変更するだろうということです親によって検出され、console.logが存在します。しかし、それは起こらないようです。ソリューションthis.setを使用して

（と

更新）子コンポーネントでトリックん：

this.set("project.name", "A new name") 

Answer 1

私はここにあなたの問題を考えるには、観測者からです。

このような単純なオブザーバは、オブジェクト自体の参照のみを監視します。 代わりにこの

properties: { 
    project: {type: Object, notify: true} 
}, 
observers:[ 
    'projectChanged(project.name)' 
], 

以上の特性ジェネリック版のため

properties: { 
    project: {type: Object, notify: true} 
}, 
observers:[ 
    'projectChanged(project.*)' 
], 

のような深いオブザーバを使用することができますし、それは次のように動作するはずです。 ここには、その件に関する完全なドキュメントへのリンクがあります。 https://www.polymer-project.org/1.0/docs/devguide/observers#observing-path-changes

あなたはまた、ポリマーによって値を設定する古典的な方法を変更することができます完璧なものにするには、それはそれは

this.set("project.name", "A new name") 

によって

this.project.name = "A new name"; 

をremplacing、フレームワークによって、より良い検出を保証コンプレックスバインディングケース、または重いオブジェクトのように見えます。