Question

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

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

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

例如，这就是我想要做的事情：

[a,b,c]被拖至child1 - ＆gt;分配给parent1.x

[1,2,3]被拖至child2 - ＆gt;分配给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;
        }
})

如果某人有更好的方法，请添加！

来自javascript的聚合物数据绑定

1 个答案: