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.
For more options, visit https://groups.google.com/d/optout.
