来自 javascript 的聚合物数据绑定答案

【问题标题】：Polymer data binding from javascript来自 javascript 的聚合物数据绑定
【发布时间】：2016-07-14 00:03:47
【问题描述】：

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

我尝试使用父级的 id 字段进行覆盖，但无法通过影子 DOM（这不是持久性的）：

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

例如，这是我想做的：

[a,b,c] 拖到child1 --> 赋值给parent1.x

[1,2,3] 拖到child2 --> 分配到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 中内置的下拉侦听器调用更新函数。

家长：

<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 调用时具有不同的行为。从检查员那里，当我使用它分配给属性时，它可以工作！但不是来自对象内部。

感谢您的帮助！

【问题讨论】：

标签： javascript polymer interact.js

【解决方案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;
        }
})

如果有人有更好的方法请补充！

【讨论】：