Question

使用Polymer 1.0

我试图在点击时更改纸质图标按钮的（聚合物）图标。无法让它发挥作用。

到目前为止我已经完成了这件事。

<paper-icon-button class="expandComments"  
 icon="{{isCollapsed? 'expand-more' : 'expand-less'}}" on-click="expanding">
</paper-icon-button>

＆＃39; expand-more和＆＃39; expand-less＆＃39;是我想要使用的图标。

创建功能：

created: function() {
  this.isCollapsed = true;
},

扩展功能：

 expanding: function() {
  var content = this.$.review_item_content;
  if(content.classList.contains('review-item-content')) {
    this.isCollapsed = false;
    content.classList.remove('review-item-content');
  }else{
    this.isCollapsed = true;
    content.classList.add('review-item-content');
  }
},

它进入扩展函数并更改isCollapsed的值并删除样式类。

现在我也试过这个：

<paper-icon-button class="expandComments" icon="{{expandIcon}}" on-click="expanding"></paper-icon-button>


icon: {
  expandIcon: 'expand-more',
},

created: function() {
this.isCollapsed = true;
},

expanding: function() {
  var content = this.$.review_item_content;  

  if(content.classList.contains('review-item-content')) {
    this.icon.expandIcon = 'expand-less';
    this.isCollapsed = false;
    content.classList.remove('review-item-content');
  }else{
    this.icon.expandIcon = 'expand-more';
    this.isCollapsed = true;
    content.classList.add('review-item-content');
  }
},

Answer 1

Polymer 1.0

支持x ? y : z之类的表达式（尚未）

您需要使用计算绑定，例如：

icon="{{_icon(isCollapsed)}}"


Polymer({
 properties: {
   isCollapsed: {
     type: Boolean,
     value: true
   }
 },
  _icon: function (isCollapsed) {
    return isCollapsed ? 'icon1' : 'icon2'
  }
});

更改isCollapsed的值将自动重新评估该功能并相应地设置图标值。

编辑：由于_icon未被定义isCollapsed未被定义，因此您必须使用默认值对其进行初始化（请参阅中的properties对象编辑上面的代码。）

Answer 2

在Scarygami发布解决方案之后，仍然存在问题。 isCollapsed仍未定义，即使它已在创建中设置，因此图标图像未在启动时加载。

解决方案：Polymer global variables

 <paper-icon-button class="expandComments" icon="{{_icon(isCollapsed)}}" on-click="expanding"></paper-icon-button>

<script>

(function() {
 var isCollapsed = true;

 Polymer({

  is: 'edit-review',

  properties: {
  reviews: Object
  },

  _icon: function (isCollapsed) {
  return isCollapsed ? 'expand-more' : 'expand-less';
  },

  ready: function() {
   this.isCollapsed = isCollapsed;
  },

  expanding: function() {
   var content = this.$.review_item_content;
   if(content.classList.contains('review-item-content')) {
    this.isCollapsed = false;
    }else{
    this.isCollapsed = true;
   }
  },
});
})();
</script>

聚合物更改纸张图标按钮中的图标on

2 个答案: