在 Polymer 1.0 模板中切换 CSS class？

Question

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

<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 class 名称）

大概是这样的？

<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 class？

Toggle CSS class in Polymer 1.0 template?

html

javascript

css

polymer

polymer-1.0