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/CAHbmOLagzSVXxJV%3Dm5wTmhEf%2BpDykFc6%3Dmr54Vbm_-k7UQq--A%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
