CODEWITHSUNDEEP
javascripthtmlpolymerpolymer-1.0
zjor
zjor

Reputation: 1043

Migrating Polymer Tutorial from 0.5 to 1.0

I'm trying to migrate this example https://www.polymer-project.org/0.5/docs/start/tutorial/intro.html to version 1.0.

It's almost done but I have two issues:

First, how can I reference a property of an element in a selector for styling?

:host([favorite]) paper-icon-button {
  color: #da4336;
}

this doesn't seem to work however property is declared like this:

<script>
Polymer({
  is: "post-card",
  properties: {
    favorite: {
        type: Boolean,
        value: false,
      notify: true
    }
  },
    favoriteTapped: function(e) {
        this.favorite = !this.favorite;
        this.fire('favorite-tap');
    }
});

Full source code is here: https://github.com/zjor/polymer-tutorial/blob/master/post-card.html

Second, does expressions work the same way as in 0.5? E.g.

        <post-card 
      favorite="{{item.favorite}}" 
      on-favorite-tap="handleFavorite" 
      hidden?="{{show == 'favorites' && !item.favorite}}">

Doesn't work either. Source: https://github.com/zjor/polymer-tutorial/blob/master/post-list.html

Upvotes: 0

Views: 147

Answers (1)

Maria
Maria

Reputation: 5604

To answer your first question, set reflectToAttribute to true in your properties declaration. 

properties: {
    favorite: {
        type: Boolean,
        value: false,
        reflectToAttribute: true,
        notify: true
    }
},

As for the second question, complex expressions have been removed in 1.0 (see docs). You will need to use computed bindings. Also, the syntax has been changed from ? to $.

hidden$="{{compute(show, item.favorite)}}">

Upvotes: 1

Related Questions