Question

我正在尝试将此示例https://www.polymer-project.org/0.5/docs/start/tutorial/intro.html迁移到1.0版。

这几乎已经完成，但我有两个问题：

首先，如何在样式选择器中引用元素的属性？

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

这似乎不起作用，但属性声明如下：

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

完整的源代码在这里：https://github.com/zjor/polymer-tutorial/blob/master/post-card.html

第二，表达式的工作方式与0.5相同吗？ E.g。

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

也不起作用。资料来源：https://github.com/zjor/polymer-tutorial/blob/master/post-list.html

Answer 1

要回答您的第一个问题，请在属性声明中将reflectToAttribute设置为true。

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

关于第二个问题，复杂的表达式已在1.0中删除（见docs）。您需要使用computed bindings。此外，语法已从？到$。

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

将Polymer Tutorial从0.5迁移到1.0

1 个答案: