Иногда возникает необходимость добавить динамический элемент в контекст. Тогда:
-
Вставной полимер может получать некоторые свойства, связанные с другим свойство внутри контекста, поэтому оно может соответствующим образом изменяться.
-
В полимере 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 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?