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/1780e59e-0dc6-44c8-a138-b432bc74f99e%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
