Thanks for the explanation, Arthur. That clarified things a bit. My original intention was to arrive at the minimum set of dependencies in order to get web components and basic templating (as in the template element with handle-bars-like mustache placeholders in it) working together. I am not very particular about having two-way binding. All I need is some handle-bars like templates.
It is beginning to look like using TemplateBinding might be overkill for this. On the other hand, it is easiest to just use polymer since it has everything I need. I'll re-visit my requirements (or better, wait for polymer 0.8!). Thanks. On Thursday, 8 January 2015 22:30:27 UTC+5:30, arthure wrote: > > Hi Kiran, > > That's what template binding does by default. Adding the template contents > inside the custom element is something that Polymer does for you. > > If you just want to avoid using shadow DOM in your element, you can use > Polymer and override the parseDeclaration method for your element. The > parseDeclaration method creates the element's shadow DOM: > > https://github.com/Polymer/polymer/blob/master/src/instance/base.js#L273 > > Replacing shadowFromTemplate with lightFromTemplate in parseDeclaration > gives you data-bound contents in the light DOM. However, you'll probably > still have a dependency on the shadow DOM polyfill, and it sounds like > that's what you're trying to avoid. > > If you want to see what Polymer is doing to instantiate the data-bound > template contents, look at lightFromTemplate (in base.js) and > instanceTemplate: > > https://github.com/Polymer/polymer/blob/master/src/instance/mdv.js#L24 > > There's a bunch of things that Polymer adds to the basic template binding, > including adding support for Polymer expressions and the "template" > attribute for legacy elements like table rows (where older browsers won't > let you insert a template element). You may or may not want those features, > but hopefully this'll get you started... > > Cheers, > Arthur > > > On Wed, Jan 7, 2015 at 10:39 PM, Kiran Rao <[email protected] > <javascript:>> wrote: > >> I've been attempting to use polymer's TemplateBinding in conjunction with >> a web component created using vanilla webcomponents-lite.js (i.e., no >> Shadow DOM). >> >> The problem I face is that template binding does get "activated"; however >> it creates the document fragment with the content of the template, >> substitutes the bound values and places these as a *sibling of the >> original template tag*. >> This is not what I want. I want the content of the template to be >> substituted with the values from the model; *and placed inside my custom >> element*. >> >> Here's a complete sample: >> >> <!DOCTYPE html> >> <html> >> <head> >> <script src="bower_components/webcomponentsjs/webcomponents-lite.js" >> ></script> >> <script src="bower_components/TemplateBinding/load.js"></script> >> <template id="tmpl-x-greet" bind> >> <div> >> {{ greeting }}, {{audience }}! Welcome to web components. >> </div> >> </template> >> </head> >> <body> >> <script> >> var XGreet = Object.create(HTMLElement.prototype, { >> createdCallback: { >> value: function(){ >> var t = document.getElementById('tmpl-x-greet'); >> t.model = {greeting: "Hello", audience: "World"}; >> Platform.performMicrotaskCheckpoint(); >> >> var clone = document.importNode(t.content, true); >> this.appendChild(clone); >> } >> } >> }); >> document.registerElement('x-greet', {prototype: XGreet}); >> </script> >> <x-greet></x-greet> >> </body> >> </html> >> >> >> >> If you run this, you see this in the Chrome Dev Tools. As you see right >> after the template tag we see the substituted elements. However, the >> content of the custom element is unsubstituted. >> >> <head> >> >> >> <!-- Other stuff here --> >> >> >> <template id="tmpl-x-greet" bind=""> >> <div> >> {{ greeting }}, {{audience }}! Welcome to web components. >> </div> >> </template> >> <div> >> Hello, World! Welcome to web components. >> </div> >> </head> >> <body> >> <!-- Scripts etc here--> >> <x-greet> >> <div> >> {{ greeting }}, {{audience }}! Welcome to web components. >> </div> >> </x-greet> >> </body> >> >> >> What am I doing wrong? >> >> Follow Polymer on Google+: plus.google.com/107187849809354688692 >> --- >> You received this message because you are subscribed to the Google Groups >> "Polymer" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected] <javascript:>. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/polymer-dev/6bfdd9ea-d7e6-4190-8373-069472c357c7%40googlegroups.com >> >> <https://groups.google.com/d/msgid/polymer-dev/6bfdd9ea-d7e6-4190-8373-069472c357c7%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> For more options, visit https://groups.google.com/d/optout. >> > > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/ac462992-f760-4385-ba33-e3bb82769ad9%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
