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/877b8117-d62b-47e6-9e08-76c0699edf1c%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
