Предположим, что у меня есть два разных polymer-elements
Один должен быть встроен внутри другого с помощью заполнителя content
.
Возможно ли связать данные между этими двумя вложенными polymer-elements
?
Я попытался, но я не могу заставить его работать: http://jsbin.com/IVodePuS/11/
В соответствии с http://www.polymer-project.org/articles/communication.html#binding должна работать привязка данных между polymer-elements
(в этих примерах они выполнялись внутри тега template
без использования заполнителя content
).
Update:
Скотт Майлз пояснил, что привязка данных работает только на уровнеtemplate
. Однако в моем случае я не знаю точного
template
заранее, но я хочу разрешить пользователю моего parent-element
указать, какой child-element
он должен содержать (при условии, что существуют разные child-elements
. Я думаю, что этот вопрос связан с этим: Использование шаблона, определенного в light dom внутри элемента Polymer
Я обновил приведенный ниже пример, чтобы выделить его:
<polymer-element name="parent-element" >
<template >
<div>Parent data: {{data1}} </div>
<content />
</template>
<script>
Polymer('parent-element', {
data1 : '',
ready: function() {
this.data='parent content';
}
});
</script>
</polymer-element>
<polymer-element name="child-element" attributes="data2">
<template>
<div>Parent data: {{data2}} </div>
</template>
<script>
Polymer('child-element', {
data2 : '',
ready: function() {
}
});
</script>
</polymer-element>
<polymer-element name="child2-element" attributes="data2">
<template>
<div>Parent data: {{data2}} </div>
</template>
<script>
Polymer('child2-element', {
data2 : '',
ready: function() {
}
});
</script>
</polymer-element>
Пользователь может выбрать, какой child-element
для вставки:
<parent-element data1 = "test">
<child-element data2="{{data1}}"/>
</parent-element>
<parent-element data1 ="test" >
<child2-element data2="{{data1}}"/>
</parent-element>
Обход проблемы:
Единственным обходным решением, которое я нашел, было добавить change watcher
и использовать getDistributedNodes()
для получения дочернего элемента и вручную установить data2
в data
:
<polymer-element name="parent-element" >
<template >
<div>Parent data: {{data}} </div>
<content id="content"/>
</template>
<script>
Polymer('parent-element', {
data : '',
ready: function() {
this.data='parent content';
},
dataChanged : function() {
contents = this.$.content.getDistributedNodes();
if (contents.length > 0) {
contents[0].data2 = this.data;
}
},
});
</script>
</polymer-element>