В некоторых случаях нам может потребоваться динамическое добавление пользовательского элемента в контекст. Затем:

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

На уровне полимера 0.5 мы могли бы использовать PathObserver для привязки свойства к свойству контекста для недавно добавленного компонента. Однако я не нашел обходного пути или аналога для полимера 1.0.

Я создал пример для 0.5 и точно так же для 1.0. Ниже приведен код полимера, по которому он делает инъекцию. Также вы можете увидеть полные примеры поршней для ясности.

Ej 0,5:

<polymer-element name="main-context">
  <template>
    <one-element foo="{{foo}}"></one-element>
    <div id="dynamic">
    </div>
  </template>
  <script>
    Polymer({
      domReady: function() {
        // injecting component into polymer and binding foo via PathObserver
        var el = document.createElement("another-element");
        el.bind("foo", new PathObserver(this,"foo"));
        this.$.dynamic.appendChild(el);
      }
    });
  </script>
</polymer-element>

Пожалуйста, посмотрите полный пример plunkr:http://plnkr.co/edit/2Aj3LcGP1t42xo1eq5V6?p=preview

Ej 1.0:

<dom-module id="main-context">
  <template>
    <one-element foo="{{foo}}"></one-element>
    <div id="dynamic">
    </div>
  </template>
</dom-module>
<script>
  Polymer({
    is: "main-context",
    ready: function() {
      // injecting component into polymer and binding foo via PathObserver
      var el = document.createElement("another-element");
      // FIXME, there's no a path observer: el.bind("foo", new PathObserver(this,"foo"));
      this.$.dynamic.appendChild(el);
    }
  });
</script>

Пожалуйста, посмотрите полный пример plunkr:http://plnkr.co/edit/K463dqEqduNH10AqSzhp?p=preview

Вы знаете какой-нибудь обходной путь или эквивалент с полимером 1.0?