HTML 属性名称中的美元符号

Question

我在查看一些 Polymer 代码 (link) 时偶然发现了一些新东西：html 属性名称中的美元符号 $，例如

<div class="item" wide-layout$="{{wide}}">

此外，使用了 CSS 选择器：

.item[wide-layout] .title { ... }

如何解释元素属性中的 $ 符号？

谢谢大家抽出时间！

Answer 1

在元素 上使用 $ 将 一个 属性 绑定到一个属性。您可以阅读更多 here.

wide 在您的场景中可能是元素上的 Boolean 属性。

当 wide = true 时，将向元素添加 wide-layout DOM 属性，以便可以通过 CSS.

对其进行定位

Answer 2

美元符号告诉 Polymer 某些代码将更改属性，可能是 class 或 Polymer 元素上的任何特定 属性。

代码可以是一个函数，也可以是一个简单的变量。

Example:

<shopping-cart class$="[[colorDependingOnItem(onSale, typeOfBrand)]] row-element">

因此 class 现在可以根据 colorDependingOnItem returns 方法动态更改，基于 onSale 和 typeOfBrand 这两个属性。