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/4de1ca5e-64fa-4cf0-906a-bd5b84e6ce50%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
