javascript - 来自 javascript 的 polymer 数据绑定(bind)

Question

我正在尝试使用 Polymer 实现拖放。当数据被拖到子元素上时，我想将其写回其父元素以获取分配给它的属性。但是，当使用 native 绑定(bind)功能时，parent1 的子级将覆盖 parent2 的属性。

我尝试使用父级的 id 字段进行覆盖，但无法超越影子 DOM(这不是持久性的):

Polymer.dom(document.getElementById('id')).node.x = data

例如，这就是我想要做的:

[a,b,c] dragged to child1 --> assign to parent1.x

[1,2,3] dragged to child2 --> assign to parent2.x

注意 this.data 函数，但将 [a,b,c] 从 child1 分配给 parent1.x 和 parent2.x 就好像它是静态变量一样。

这是子代码:

<dom-module id=“child">
    <template>
        {{data}}
    </template>
</dom-module>

</body>

<script>
    (function () {
        Polymer({
            is: “child",
            properties: {
                data: {
                    type: Array,
                    notify: true,
                },
                id: {type: String}
            },
            addData: function (parent, attribute) {
                //This isn’t persistent
                parent.attribute = window.attributeData[attribute].data;
                //This overwrites x & y for both parents
                this.data = window.attributeData[attribute].data;
            },
            ready: function () {
                var child = this;
                interact('.dropzone')
                        .dropzone({overlap: 'center'})
                        .accept('.draggable')
                        //This event fires when the attribute has been dropped
                        .on('drop', function (event) {
                            child.addData(parent, attribute);
                            //event.relatedTarget.textContent = '';
                        });
            }
        });
    }());
</script>

注意，我正在从 interact.js 内置的 drop-listener 调用更新函数。

父级:

<dom-module id=“parent">
    <template>
        <span>{{x}}</span>
        <child data={{x}}></child>
        <span>{{y}}</span>
        <child data={{y}}></child>
    </template>
</dom-module>

</body>

<script>
    (function () {
        Polymer({
            is: “parent",
            properties: {
                x: {
                    type: Array
                },
                y: {
                    type: Array
                }
            },
            setData: function(attr, data) {
                this.attr = data;
            }
        });
    }());
</script>

index.html:

<parent></parent>
<parent></parent>

最后，Polymer.dom 在从代码调用或从 Inspect Element 调用时具有不同的行为。从检查员看来，当我使用它来分配给该属性时，它有效!但不是来自对象内部。

感谢您的帮助!

Answer 1

这不是最好的方法，但如果其他人偶然发现同样的问题:

来自发送元素:

var forward = new CustomEvent('eventToBeFired', {
                    detail: { data: data }
                });
document.querySelector('element-id').dispatchEvent(forward);

来自接收元素:

Polymer({
        is: "element-id",
        listeners: {
            'eventToBeFired': 'functionToExcecute'
        },
        functionToExecute: function(e){
             e.detail.data;
        }
})

如果有人有更好的方法请添加!