Nevermind. I got it. Can't say that I truly grok it, but I've got it working.
Onward and upward. On Thursday, May 7, 2015 at 3:43:41 PM UTC-4, Thad Humphries wrote: > > How does all the effect binding between components and built-in elements > (as I am currently wrestling with the age-slider.html example in "Polymer > in 10 Minutes" and not getting very far). > > On Thursday, May 7, 2015 at 3:32:42 PM UTC-4, Scott Miles wrote: >> >> Like Michael said "0.8 no longer has interpolation." >> >> One ramification is that any binding to *textContent* has to be >> exclusive node content. IOW, "<span>[[owner]]</span>" and not " ... >> [[owner]] ... " nor "<span>owner: [[owner]]</span>". >> >> The return of interpolation is on the roadmap for study after 1.0. >> >> On Thu, May 7, 2015 at 5:11 AM, Robert Stone <[email protected]> wrote: >> >>> I can't remember where I read it, but it's something to with bound >>> properties can't have any content in front of them, it's the same reason >>> you need the _setColorStyle type functions. I guess the polymer parser only >>> looks at the start of the content for properties. >>> >>> >>> On Thursday, 7 May 2015 13:03:26 UTC+1, Thad Humphries wrote: >>>> >>>> Well I'll be... Wow! >>>> >>>> This is Daniel's fav-color element. Daniel likes the color red. >>>> >>>> >>>> Thank you again. What gave you that idea? Is there something in the >>>> migration doc or elsewhere that I'm missing? >>>> >>>> For completeness sake, here is the new fav-color.html (my intent is to >>>> put all of these on GitHub when I'm finished). >>>> >>>> <link rel="import" href="../polymer/polymer.html"> >>>> >>>> <dom-module id="fav-color"> >>>> <style> >>>> .owner { font-weight: bold } >>>> </style> >>>> <template> >>>> This is <span class="owner">[[owner]]</span>'s fav-color element. >>>> <span>[[owner]]</span> likes the color >>>> <span style$="{{_setColorStyle(color)}}">[[color]]</span>. >>>> </template> >>>> </dom-module> >>>> >>>> <script> >>>> Polymer({ >>>> is: 'fav-color', >>>> properties: { >>>> owner: { >>>> type: String, >>>> value: "Daniel" >>>> }, >>>> color: { >>>> type: String, >>>> value: "red" >>>> } >>>> }, >>>> _setColorStyle: function(color) { >>>> return "color: " + color; >>>> } >>>> }); >>>> </script> >>>> >>>> >>>> On Thursday, May 7, 2015 at 7:54:23 AM UTC-4, Robert Stone wrote: >>>>> >>>>> Have you tried <span>[[owner]]</span> ? >>>>> >>>>> On Thursday, 7 May 2015 12:51:10 UTC+1, Thad Humphries wrote: >>>>>> >>>>>> Oh yes! That works. Now I get >>>>>> >>>>>> This is Daniel's fav-color element. [[owner]] likes the color red. >>>>>> >>>>>> >>>>>> Thanks. I had tried it outside once, but then I was still trying >>>>>> double bracket and double mustache substitution. >>>>>> >>>>>> Any ideas on how to get the owner property to repeat like it did in >>>>>> 0.5? >>>>>> >>>>>> On Thursday, May 7, 2015 at 7:38:58 AM UTC-4, Robert Stone wrote: >>>>>>> >>>>>>> OK, I can see the problem now. Your setColorStyle needs to be >>>>>>> declared 'outside' of the properties block >>>>>>> >>>>>>> On Thursday, 7 May 2015 12:31:02 UTC+1, Thad Humphries wrote: >>>>>>>> >>>>>>>> No, I got that. Maybe I'm going a bridge too far for Polymer 0.8. >>>>>>>> I'm trying to adapt the examples 0.5's "Polymer in 10 Minutes >>>>>>>> <https://www.polymer-project.org/0.5/docs/start/creatingelements.html>" >>>>>>>> >>>>>>>> to 0.8, in this case the fav-color.html example. What I've written is >>>>>>>> >>>>>>>> <link rel="import" href="../polymer/polymer.html"> >>>>>>>> >>>>>>>> <dom-module id="fav-color"> >>>>>>>> <style> >>>>>>>> .owner { font-weight: bold } >>>>>>>> </style> >>>>>>>> <template> >>>>>>>> This is <span class="owner">[[owner]]</span>'s fav-color >>>>>>>> element. >>>>>>>> [[owner]] likes the color <span >>>>>>>> style$="{{setColorStyle(color)}}">[[color]]</span>. >>>>>>>> </template> >>>>>>>> </dom-module> >>>>>>>> >>>>>>>> <script> >>>>>>>> Polymer({ >>>>>>>> is: 'fav-color', >>>>>>>> properties: { >>>>>>>> owner: { >>>>>>>> type: String, >>>>>>>> value: "Daniel" >>>>>>>> }, >>>>>>>> color: { >>>>>>>> type: String, >>>>>>>> value: "red" >>>>>>>> }, >>>>>>>> setColorStyle: function(color) { >>>>>>>> return "color: " + color; >>>>>>>> } >>>>>>>> } >>>>>>>> }); >>>>>>>> </script> >>>>>>>> >>>>>>>> >>>>>>>> That results in: >>>>>>>> >>>>>>>> This is Daniel's fav-color element. [[owner]] likes the color red. >>>>>>>> >>>>>>>> >>>>>>>> And the message "Uncaught TypeError: this.setColorStyle is not a >>>>>>>> function" in the console. (Note the word red has not been colored.) >>>>>>>> >>>>>>>> Should I call it differently from within a <template>? But I guess >>>>>>>> that by indicating your function is meant to be private that you are >>>>>>>> calling it from within the <template>. >>>>>>>> >>>>>>>> Maybe the problem is with color being both a property and in this >>>>>>>> funtion a parameter. Maybe it's related to 0.8 lacking repeat binding, >>>>>>>> though I'm not trying to repeat array elements, but use owner and >>>>>>>> color >>>>>>>> twice. Note that owner does not get a second replacement. >>>>>>>> >>>>>>>> On Thursday, May 7, 2015 at 5:33:14 AM UTC-4, Robert Stone wrote: >>>>>>>>> >>>>>>>>> Did you follow Michaels example correctly ? The key bit is the >>>>>>>>> declararion of the functionn that computes the property value: >>>>>>>>> >>>>>>>>> backgroundColorStyle: function(colour) { >>>>>>>>> return "background-color: " + colour; >>>>>>>>> } >>>>>>>>> >>>>>>>>> You need to include this inside the Polymer({}) declaration block >>>>>>>>> which I guess wasn't completely clear, so: >>>>>>>>> >>>>>>>>> Polymer({ >>>>>>>>> is: "my-element", >>>>>>>>> properties: { >>>>>>>>> myproperty: String >>>>>>>>> }, >>>>>>>>> backgroundColourStyle: function(colour) { >>>>>>>>> return "background-color: " + colour; >>>>>>>>> } >>>>>>>>> }); >>>>>>>>> >>>>>>>>> Your error message suggests you don't have this function. For me, >>>>>>>>> that works perfectly on Chrome. >>>>>>>>> >>>>>>>>> For what it's worth, I named the function _backgroundColourStyle >>>>>>>>> to 'hint' that it was an internal function and not part of the API - >>>>>>>>> I >>>>>>>>> don't like that I have to do this (expose the function publicly) but >>>>>>>>> it >>>>>>>>> seems to be the way polymer works. >>>>>>>>> >>>>>>>>> Rob >>>>>>>>> >>>>>>>>> On Wednesday, 6 May 2015 21:04:31 UTC+1, Thad Humphries wrote: >>>>>>>>>> >>>>>>>>>> When I try this, the Chrome console reports, "Uncaught TypeError: >>>>>>>>>> this.backgroundColorStyle is not a function" >>>>>>>>>> >>>>>>>>>> On Tuesday, April 14, 2015 at 5:44:23 PM UTC-4, Michael Bleigh >>>>>>>>>> wrote: >>>>>>>>>>> >>>>>>>>>>> 0.8 no longer has interpolation. You'll need to use annotated >>>>>>>>>>> computed properties instead: >>>>>>>>>>> https://www.polymer-project.org/0.8/docs/devguide/data-binding.html#annotated-computed >>>>>>>>>>> >>>>>>>>>>> For instance >>>>>>>>>>> >>>>>>>>>>> <h1 style$="{{backgroundColorStyle(colour)}}">Hello World!</h1> >>>>>>>>>>> >>>>>>>>>>> { >>>>>>>>>>> backgroundColorStyle: function(colour) { >>>>>>>>>>> return "background-color: " + colour; >>>>>>>>>>> } >>>>>>>>>>> } >>>>>>>>>>> >>>>>>>>>>> On Tuesday, April 14, 2015 at 2:09:35 PM UTC-7, Robert Stone >>>>>>>>>>> wrote: >>>>>>>>>>>> >>>>>>>>>>>> Just migrating a very simple 0.5 example app over to 0.8. >>>>>>>>>>>> >>>>>>>>>>>> For 0.5 the following worked: >>>>>>>>>>>> <h1 id="greeting" _style="background-color: {{colour}}">Hello >>>>>>>>>>>> World !</h1> >>>>>>>>>>>> >>>>>>>>>>>> As I understand it, for 0.8 I need to do: >>>>>>>>>>>> <h1 id="greeting" style$="background-color: {{colour}}">Hello >>>>>>>>>>>> World !</h1> >>>>>>>>>>>> >>>>>>>>>>>> However this doesn't work as the bound property value doesn't >>>>>>>>>>>> get inserted. If I remove the 'background-color:' part then I can >>>>>>>>>>>> see my >>>>>>>>>>>> bound property value being correctly inserted. >>>>>>>>>>>> >>>>>>>>>>>> I've worked my way through the migration guide and can't find >>>>>>>>>>>> anything that might indicate why this isn't working so was hoping >>>>>>>>>>>> someone >>>>>>>>>>>> on here might be able to help. >>>>>>>>>>>> >>>>>>>>>>>> Cheers >>>>>>>>>>>> Rob >>>>>>>>>>>> >>>>>>>>>>> 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/09b28089-80d4-4925-831d-77dbaaca9eef%40googlegroups.com >>> >>> <https://groups.google.com/d/msgid/polymer-dev/09b28089-80d4-4925-831d-77dbaaca9eef%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/c6bae723-edfb-4425-ae41-c44c5d0a2a38%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
