在 Polymer 1.0 模板中切换 CSS 类？答案

【问题标题】：Toggle CSS class in Polymer 1.0 template?在 Polymer 1.0 模板中切换 CSS 类？
【发布时间】：2015-07-21 16:56:26
【问题描述】：

根据布尔条件在 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>

【问题讨论】：

我只是从聚合物开始，但您可以使用函数或计算属性。或者保留你所拥有的并在 CSS 中使用属性选择器。
epascarello，谢谢你的回答，但我不想使用函数，因为我想在 JavaScript 开发人员（谁将创建聚合物组件 JS 部分）和 HTML 设计师（谁将创建聚合物模板）。如果 JS 部分会“了解” CSS 类和 GUI 逻辑，那么 JS 开发人员应该与 HTML 设计器协调。
计算属性只不过是在做class$="[[employeeClass]]"，而 JS 开发人员只需要返回类......看起来很奇怪，他们无法相互交流。
他们当然可以交流 :) 但这会违反 MVC 模式并在 JS 逻辑和 GUI 之间产生过多的内聚
所以使用 CSS 和 data 属性并指定值 .employee[data-selected="true"]。在 0.5 中，可以使用 | 运算符来执行此操作，但是对于计算的内容，它已被删除。

标签： javascript html css polymer polymer-1.0

【解决方案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>

【讨论】：

好吧好吧，但是当我使用第三方 CSS 引导程序并且我想从该引导程序中应用 CSS 类到选定的员工元素时，我必须做什么？也许 Polymer 1.0 中有一些特性，比如 LESS 中的 CSS mixin？
我已经包含了一个使用计算绑定的示例。请注意，我不知道这将如何与 shadow DOM polyfill 交互，这可能取决于它们自动应用的各种类。