Tomek, My motivation for looking into TemplateBinding was to use "vanilla" web components in combination with some sort of data binding. And I wanted to do this without having to incur the weight of a full-blown polymer layer.
Having said that, if 0.8 makes mix and match possible and if the cost incurred in using a subset of polymer is low, I might end up leaning towards that approach. Will have to wait and watch. On Monday, 12 January 2015 21:03:23 UTC+5:30, Tomek W wrote: > > Kiran, just note that TempalteBinding may not work out of the box in 0.8. > It currently does not work with 0.8-preview: > https://github.com/Polymer/polymer/issues/966, and I'm afraid binding > features will be limited to <polymer-element>`s only > https://groups.google.com/forum/#!topic/polymer-dev/OP8C4-LR_0E > We have started small fan-page ;) of TempalteBinding > http://templatebinding.org/ to gather some attention, and in worst case > push it forward, if Polymer is going to abandon it. > > W dniu piątek, 9 stycznia 2015 06:28:07 UTC+1 użytkownik Kiran Rao napisał: >> >> 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]> 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]. >>>> 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/cdf60312-f2e3-49e9-ba3d-8c37d66593e3%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
