1
私はPolymerを使ってドラッグアンドドロップを実装しようとしています。子要素にデータをドラッグすると、その要素に割り当てられているプロパティの親にデータを書き戻したいと思います。ただし、ネイティブバインディング機能を使用すると、parent1の子はparent2のプロパティを上書きします。JavaScriptデータバインディング
私は親のidフィールドを使用して上書きしようとしたが、影DOM（これは永続的ではない）を乗り越えることができません：たとえば
Polymer.dom(document.getElementById('id')).node.x = data
、ここで私が何をしたいです：
>parent1.x
child2にドラッグ
[1,2,3]に割り当てる - - >割当T child1にドラッグ
[a,b,c]parent2.x
注this.data関数Oそれは静的変数であるかのようchild1からparent1.xとparent2.x両方に[a,b,c]を割り当てます。
ここ子コードです：私はinteract.jsに組み込まれたドロップリスナーからの更新機能を呼んでいる
<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>
注意。
親：
<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。インスペクタから、私がプロパティに割り当てるためにこれを使用すると、それは動作します！しかし、オブジェクト内からではありません。
ありがとうございました！