将 Polymer 教程从 0.5 迁移到 1.0

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 中的相同？例如

        <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). You will need to use computed bindings。另外，语法已从 ? 更改为 $。

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

将 Polymer 教程从 0.5 迁移到 1.0

Migrating Polymer Tutorial from 0.5 to 1.0

html

javascript

polymer

polymer-1.0