0.8 styling background colour with a bound property not possible ?

[Robert Stone]

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

[Michael Bleigh]

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;

[Robert Stone]

Thanks Michael for a really prompt reply :)

[Thad Humphries]

When I try this, the Chrome console reports, "Uncaught TypeError: this.backgroundColorStyle is not a function"

[Robert Stone]

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

[Thad Humphries]

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" 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.

[Robert Stone]

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

[Robert Stone]

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:

[Thad Humphries]

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?

[Robert Stone]

Have you tried <span>[[owner]]</span> ?

[Thad Humphries]

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>

[Robert Stone]

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.

[Scott Miles]

Like Michael said "0.8 no longer has interpolation."

One ramification is that any binding to textContent has to be exclusive node content. IOW, "<span>[[owner]]</span>" and not " ... [[owner]] ... " nor "<span>owner: [[owner]]</span>".

The return of interpolation is on the roadmap for study after 1.0.

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 polymer-dev...@googlegroups.com.

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.

[Thad Humphries]

How does all the effect binding between components and built-in elements (as I am currently wrestling with the age-slider.html example in "Polymer in 10 Minutes" and not getting very far).

[Thad Humphries]

Nevermind. I got it. Can't say that I truly grok it, but I've got it working.

Onward and upward.