如何在 Polymer 模板中使用布尔值切换 class？

Question

想不使用辅助函数 here 来实现。我知道我可以使用一些基本运算符（即 !），但我想在模板中使用更多逻辑。基本上，目的是使用通过 iron-media-query 设置的布尔值来切换元素上的 class。

伪代码：

<div class$="[[(mobile)?'mobile-styling':null]]"></div>

P.S。 class 名称不能是布尔变量名称。

谢谢

Answer 1

很遗憾，此功能已被弃用以提高性能。 polymer 1.0+ 仅支持以下内容：

属性或子属性路径（用户，address.street）。
计算绑定 (_computeName(firstName, lastName, locale))。
上面的任何一个，前面有否定运算符 (!)。

这是一个如何实现计算绑定的示例：

<dom-module ...>
  <template>
    <div class$="[[hasMobileStyle(mobile)]]"></div>
  </template>
  <script>
    Polymer({
      ...
      hasMobileStyle: function(mobile) {
        return mobile ? 'mobile-styling' : '';
      }
    });
  <script>
</dom-module>

您还可以使用布尔值作为选择器来摆脱计算绑定：

<div class$="mobile-styling--[[mobile]]"></div>

你会在 .mobile-styling--true

上做一个选择器

您所要求的无法完成。只有这三个条件有效，[[(mobile)?'mobile-styling':null]] 不符合条件。

如何在 Polymer 模板中使用布尔值切换 class？

How can I toggle a class using a boolean in a Polymer template?

css

polymer

responsive

templating