聚合物更改通知和双向绑定语法

Polymer change notification and two-way binding syntax

本文关键字：绑定 语法 通知 聚合物      更新时间：2023-09-26

我正试图弄清楚如何使用这里描述的聚合物中的双向通知

但是，虽然这解释了如果子元素上的对象发生了变化，有一些通知机制:

当属性的子属性配置为type: Object时更改时，元素会触发一个未冒泡更改的DOM事件有一个细节。路径值，表示对象上的路径改变。

但是它没有给出任何线索(我可以整理)语法将如何基于此更改编写一些行为。

例如，如果我有一个家长:

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

当子节点被单击时，我期望一些事件被触发并被父节点拾取，但是我不知道如何在父节点为该事件编写脚本。我错过了什么?

我最近遇到了这个问题，并通过触发我自己的事件来解决这个问题。您可以在这里看到相关文档(请注意，该文档适用于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>
相关文章：