Daten-Bindung zwischen den verschachtelten polymer-Elemente

Angenommen ich habe zwei verschiedene polymer-elements

Man sollte eingebettet werden in den anderen mit der content Platzhalter.
Ist es möglich zu tun, Daten-Bindung zwischen diesen zwei geschachtelte polymer-elements ?

Habe ich versucht, aber ich kann nicht ankommen es zu wirken: http://jsbin.com/IVodePuS/11/

Laut http://www.polymer-project.org/articles/communication.html#binding Daten-Bindung zwischen polymer-elements funktionieren sollte (in diesen Beispielen wurden Sie in der template tag ohne ein content Platzhalter).

Update:

Scott Miles klargestellt, dass die Datenbindung funktioniert nur auf der template Ebene.
Aber in meinem Fall ich don T wissen, die genaue template vorher aber möchte ich dem Benutzer erlauben, meine parent-element angeben, welche child-element es enthalten sollte (vorausgesetzt, es gibt verschiedene child-elements.
Ich denke, diese Frage ist damit verbunden: Mit Vorlage definiert im Licht-dom im inneren ein Polymer-element

Ich aktualisiert das Beispiel unten, um zu markieren sein:

<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>

Kann der Benutzer wählen, welche child-element einbetten:

<parent-element data1 = "test">
  <child-element data2="{{data1}}"/>
</parent-element>

<parent-element data1 ="test" >
  <child2-element data2="{{data1}}"/>
</parent-element>

Problemumgehung:

Ist die einzige Lösung, die ich fand, war das hinzufügen change watcher und verwenden getDistributedNodes() um das Kind-element, und legen Sie manuell data2 zu 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>
Genau, was ich tun muss. Ich werde versuchen, Ihre Lösung heute

InformationsquelleAutor | 2014-05-07

Schreibe einen Kommentar