Binding imperatively

Question

Is there a way to set up bindings imperatively. An example use case:

var el2 = new MyElement();
el2.myProp = this.$.anotherElement.anotherProp

That won't setup a binding, it just assigns the value or object. I'd like to find a way to do something like:

el2.myProp.bindTo(this.$.anotherElement.anotherProp)

Possible?

Answer 1

Polymer 1.0 does not support this at the moment - as explained by @kevinpschaaf in Github https://github.com/Polymer/polymer/issues/1778.

(comment by @kevinpschaaf)

No, we don't currently support this, outside of dom-bind, which is the only template implementation that late-binds instance children. You can document.createElement('template', 'dom-bind'), then you can dynamically append children with binding annotations to its content, and the bindings will only be evaluated once the dom-bind is attached to the document. See tests here that show this usage of it: https://github.com/Polymer/polymer/blob/master/test/unit/dom-bind.html#L95

Note that dom-bind does not currently allow binding to outer scope, so it has limited use in custom element templates (it's main use case is for binding between elements in the main document), and that's not likely to change short-term.

We are achieving a lot of performance optimization by baking the binding connections into the prototype at registration time for an element (rather than at instance time), and we haven't built up enough of the machinery to easily allow runtime addition/removal of bindings.