My working code is on github if you wan to compare it to yours: https://github.com/rasto68/hello-world-custom-element/tree/polymer-0.8
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/4983ffaf-d046-45e7-984a-083c6277a376%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
