Polymer 更改通知和 two-way 绑定语法

Question

我正在尝试弄清楚如何在 here

中描述的 polymer 中使用双向通知

但是虽然这解释了如果 child 元素上的 object 已更改，则有一些通知机制：

When a sub-property of a property configured with type: Object changes, an element fires a non-bubbling -changed DOM event with a detail.path value indicating the path on the object that changed.

但它没有提供任何线索（我可以整理）语法将如何根据此更改编写某些行为脚本。

例如，如果我有 parent:

<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>

我有一个 child 元素：

<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>

单击 child 时，我希望某些事件会触发并被 parent 接收，但我不知道如何在 parent 处为该事件编写脚本].我错过了什么？

Answer 1

我最近遇到了这个问题，并通过触发我自己的事件来解决这个问题。您可以查看 here 的文档（请注意，该文档适用于 0.5，但我在 1.0 版中完成了此操作）。在您的子元素中，您可以更改 childClick 函数以触发自定义事件，如下所示：

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

然后在您的父元素中，您要向 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>

Polymer 更改通知和 two-way 绑定语法

Polymer change notification and two-way binding syntax

javascript

polymer