聚合物變更通知和雙向綁定語法

Question

我正在嘗試弄清楚如何在此處描述的聚合物中使用2向通知

但這解釋了有一些機制可以通知子元素上的對象是否已更改：

當配置為類型：對象的屬性的子屬性更改時，元素將觸發一個非冒泡更改的DOM事件，該事件具有detail.path值，該值指示更改后的對象上的路徑。

但是它並沒有提供任何線索（我可以弄清楚）該語法如何根據此更改編寫腳本。

例如，如果我有父母：

<dom-module id="parent-element">
<template>
<child-element obj="{{myObj}}"></child-element>
</template>
<script>
Polymer({
    is: "parent-element",
    myObj: {
        type: Object
    },
    parentClick: function(){
        this.myName = "Parent";
    },
    myObjChanged: function(){ //How to handle this event?
        console.log("I have no idea what I'm doing")
    }
    });
</script>

我有一個子元素：

<dom-module id="child-element">
    <template>
     <span on-click="childClick">Click me</span>
</template>

<script>
    Polymer({
        is: 'child-element',
        properties: {
            obj: {
                type: Object,
                notify: true
            }
        },
        ready: function(){
            this.obj = {foo: "bar"}
        },
        childClick: function(){
            this.obj.foo = "baz"
        }
    });
</script>

當孩子被點擊時，我希望某個事件觸發並被父母接走，但是我不知道如何在父母處為該事件編寫腳本。 我想念什么？

Answer 1

我最近遇到了這個問題，並通過觸發自己的事件來做到這一點。 您可以在此處查看有關該文檔的文檔（請注意，該文檔適用於0.5，但我已經使用1.0版完成了此操作）。 在子元素中，您可以更改childClick函數以觸發自定義事件，如下所示：

childClick: function(){
    this.obj.foo = "baz"
    this.fire("child-element-click"); // this can be anything you want...
}

然后在您的父元素中，您想要向child-element添加一個偵聽child-element ：

    <dom-module id="parent-element">
    <template>
        <child-element obj="{{myObj}}" on-child-element-click="myObjChanged"></child-element>
    </template>
<script>
    Polymer({
        is: "parent-element",
        myObj: {
            type: Object
        },
        parentClick: function () {
            this.myName = "Parent";
        },
        myObjChanged: function () {
            console.log("I have no idea what I'm doing")
        }
    });
</script>