Liaison de données entre des éléments polymères imbriqués
Supposons que j'ai deux distincts polymer-elements
On devrait être incorporé à l'intérieur de l'autre à l'aide de la content
espace réservé.
Est-il possible de faire la liaison de données entre ces deux imbriqués polymer-elements
?
J'ai essayé, mais je ne peux pas le faire fonctionner: http://jsbin.com/IVodePuS/11/
Selon http://www.polymer-project.org/articles/communication.html#binding de liaison de données entre polymer-elements
devrait fonctionner (dans les exemples qu'ils ont fait à l'intérieur de la template
balise sans l'aide d'un content
espace réservé).
Mise à jour:
Scott Miles a précisé que la liaison de données ne fonctionne que sur le template
niveau.
Toutefois, dans mon cas, je ne sais pas exactement template
à l'avance, mais je veux permettre à l'utilisateur de mon parent-element
pour spécifier les child-element
il doit contenir (à condition qu'il existe différents child-elements
.
Je pense que cette question est liée à celle-ci: En utilisant le gabarit défini à la lumière dom à l'intérieur d'un Polymère élément
J'ai mis à jour l'exemple ci-dessous pour mettre en évidence son:
<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>
L'utilisateur peut choisir child-element
à intégrer:
<parent-element data1 = "test">
<child-element data2="{{data1}}"/>
</parent-element>
<parent-element data1 ="test" >
<child2-element data2="{{data1}}"/>
</parent-element>
Solution de contournement:
La seule solution que j'ai trouvé a été d'ajouter change watcher
et l'utilisation getDistributedNodes()
pour amener l'enfant de l'élément et réglez manuellement 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>
source d'informationauteur
Vous devez vous connecter pour publier un commentaire.
Polymère de liaison de données fonctionne en fixant un modèle à l'ensemble de la sous-arborescence.
Vous avez écrit:
cela implique une règle que l'parentNode fournit le modèle contraignant. Mais maintenant, imaginez que vous vouliez écrire:
Maintenant vous avez un problème.
Au lieu de cela, dans le domaine des Polymères des exemples, vous remarquerez que le
{{}}
sont (presque toujours) à l'intérieur d'un modèle. Par exemple, si je définis:Maintenant, j'ai un modèle de contexte (
host-element
) que je peux utiliser pour lier les choses ensemble dans toute la sous-arborescence décrite par le modèle.Noter que je n'ai pas besoin
attributes="data"
pour que cela fonctionne. J'ai ajouté que si l'hôte élément exposedata
et je peux le faire:http://jsbin.com/IVodePuS/15/edit
Fonctionne comme un charme. Élément Parent est de la publication des données de propriété, qui peut être de 2 façon liés aux données. De cette façon, l'enfant de l'élément obtient les mêmes données.
Je pense que dans le domaine des Polymères >= 1.0 ce qui devrait être fait à l'aide de "L'Auto-exécutoire modèle".