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/216b5d2a-98ab-46ec-b9e6-657fd8f723bb%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
