Question

根据布尔条件，在Polymer 1.0模板中切换元素的CSS类是什么最正确的方法？

<style>
    .employee{
        ...
    }
    .employee-selected{
        ...
    }
</style>
<template is="{{dom-repeat}}" items="{{employees}}">

  <template is="{{dom-if}}" if="{{!item.isSelected}}"> 
    <div class="employe">{{item.name}}</div>
  </template>

  <template is="{{dom-if}}" if="{{item.isSelected}}">
    <div class="employee employee-selected">{{item.name}}</div>
  </template>

</template>

在Polymer 1.0中有更好的方法吗？

（不使用JavaScript中的css类名）

也许是这样的？

<style>
    .employee{
        ...
    }
    .employee[data-selected]{
        ...
    }
</style>
<template is="{{dom-repeat}}" items="{{employees}}">
    <div class="employee" 
         data-selected$="{{item.isSelected}}">{{item.name}}</div>
</template>

Answer 1

您使用该属性选择器处于正确的轨道上，但data-前缀不是必需的，可能会意外地与HTML5数据属性系统进行交互。只需selected：

就可以逃脱

<style>
    .employee{
        ...
    }
    .employee[selected]{
        ...
    }
</style>
<template is="dom-repeat" items="[[employees]]">
    <div class="employee" 
         selected$="{{item.isSelected}}">[[item.name]]</div>
</template>

或者，如果你真的想使用类：

<style>
    .employee{
        ...
    }
    .employee.selected{
        ...
    }
</style>
<template is="dom-repeat" items="[[employees]]">
    <div class$="{{_computeEmployeeSelected(item)}}">[[item.name]]</div>
</template>
<script>
  Polymer({
    _computeEmployeeSelected: function(item) {
      return 'employee '+(item.isSelected ? 'selected' : '');
    }
  });
</script>

在Polymer 1.0模板中切换CSS类？

1 个答案: