Polymer.create() - binding issues #2131
Comments
|
You are essentially data-binding imperatively, which unfortunately is not currently supported in Polymer 1.0. Quoting @kevinpschaaf ,
I did find a workaround that allows imperative bindings but it involves defining a wrapper element through javascript and manually invoking the That being said, let me know if you're interested the stop-gap workaround and I'll publish the gist. |
|
@zerodevx - would be great to see the gist - thx! |
|
My workaround, though it does allow creating In my case, I needed to place an unknown custom element inside a So the idea is to declaratively bind into an un-upgraded "placeholder" tag, and then imperatively upgrade that tag to act as a proxy between my target (the unknown element) and my main element. For example, <dom-module id="main-element">
<template>
...
<template is="dom-repeat" items="{{myList}}">
<!-- this tag does nothing for now -->
<dummy-tag foo$="{{item}}"></dummy-tag>
</template>
...
</template>
<script>
Polymer({
is: "main-element",
...
upgradeElement: function () {
// now that I know my target element is called `foo-bar`
Polymer.importHref("foo-bar.html", function () {
tplstr = '<foo-bar myData="{{foo}}"></foo-bar>';
proto = {
is: "dummy-tag",
properties: {
foo: { type: Object, value: function () { return {}; } }
}
};
var dm = document.createElement("dom-module");
dm.id = "dummy-tag";
var temp = document.implementation.createHTMLDocument("temp");
temp.body.innerHTML = tplstr;
var tpl = document.createElement("template");
tpl.content.appendChild(temp.body.firstChild);
dm.appendChild(tpl);
dm.createdCallback();
Polymer(proto);
});
},
...
});
</script>
</dom-module>As you can see, I'm still adhering to what @kevinpschaaf explained - that bindings are set during registration time. I won't recommend this pattern since in most cases (where you absolutely need to data-bind imperatively), it is much more trivial to simply wire up observers to propagate changes to; listeners to receive changes from; the target element that you've imperatively inserted into light DOM. |
|
Our company also has a large (large) single page style app and cannot do without dynamically managing element creation, or else the creation time is simply unacceptable. This is becoming almost impossible without being able to late-bind as part of pushing and pulling elements in and out of the DOM. I see that #1796 has Being able to spread creation overhead smartly across the lifetime of the app is arguably a must when apps become large-scale (like, larger than the PSK 😁). |
|
I don't think the observer propagation approach is acceptably efficient when you want two way binding. |
|
@WoodyWoodsta FWIW I solved this problem with a combination of iron-pages with |
|
@TimvdLippe We have that tactic employed for page level creation, and in fact have not come across the need to bind across the Within some of the pages, there are elements with local DOM that is populated with a varying type of content depending on the context, sort-of like a contextual UI builder. The builders create the resultant DOM by matching context against a json template config, and then use a bunch of |
|
I've implemented a generic workaround that updates template on element's registration. See https://github.com/firmfirm/f-di, it may help some of you. |
|
Starting to loose hope in the Polymer project. So many months passed and javascript binding is still not implemented ! |
|
I hope this code useful: #1778 (comment) |
|
/sub |
|
Closing per #3460 (comment) Runtime databinding API shipped in Polymer 2. |
I have a fairly large single page app, and consequently only render elements to the DOM if the user navigates to them.
I'm using
Polymer.create()to achieve this, however I'm having issues setting up bindings using this method. Here is a jsbin demonstrating the approach and issue. It gives the following console output:The meat of the problem is with:
this.create('list-elem', {things: '{{otherThings}}'});, whereotherThingsis a property of the parent element.At the moment the only workaround I have is to set up observers in the parent element and explicitly set the values in the child elements, which is quite clunky.
Am I missing something, or is it only possible to bind correctly by rendering everything into the DOM at the same time? If that is the case, is it possible to add support for this in Polymer.create()?
The text was updated successfully, but these errors were encountered: