Связывание данных между вложенными полимерными элементами

Предположим, что у меня есть два разных 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>

Ответы

Ответ 1

Полимерная привязка данных работает путем присоединения модели ко всему поддереву.

Вы писали:

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

это означает правило, что parentNode предоставляет модель привязки. Но теперь представьте, что вы хотели написать:

<parent-element>
  <div>
    <child-element data2="{{data}}"></child-element>
  </div>
</parent-element>

Теперь у вас есть проблема.

Вместо этого в примерах Polymer вы заметите, что {{}} (почти всегда) внутри шаблона. Например, если я определяю:

<polymer-element name="host-element" attributes="data" noscript>
<template>
  <parent-element data1="{{data}}">
    <child-element data2="{{data}}"></child-element>
  </parent-element>
</template>
</polymer-element>

Теперь у меня есть модельный контекст (host-element), который я могу использовать для связывания вещей во всем поддереве, описываемом шаблоном.

Обратите внимание, что для этого мне не нужно attributes="data". Я добавил, что так что host-element предоставляет data, и я могу это сделать:

<host-element data="test"></host-element>

http://jsbin.com/IVodePuS/15/edit

Ответ 2

Работает как шарм. Родительский элемент публикует данные свойств, которые могут быть связаны двумя способами. Таким образом, дочерний элемент получает те же данные.

<polymer-element name="custom-element">
<template>
    <parent data="{{data}}">
        <child data="{{data}}"></child>
    </parent>
</template>
<script>
    Polymer({
        ready: function() {

        },
        data: {}
    });
</script>