css - 在 Aurelia 中使用两个 style.bind

Question

我试图在 Aurelia 中使用两个 style.bind 但它不起作用。 我也可以只使用一个 style.bind 并应用我想要的样式，但我不知道该怎么做。

这是一段代码:

<span repeat.for="source of item.data.sources | sort: 'weight' : 'asc'" 
  if.bind="source.weight" 
  class="weight" 
  style.bind="source.weight | fontWeight" 
  style.bind="source.is_italic && 'font-style: italic;'"
>
  ${source.name}
</span>

我的 fontWeight valueConverter 唯一做的就是返回 CSS 语法中的 font-weight:

export class FontWeightValueConverter {
  toView(weight) {
    return 'font-weight: ' + weight;
  }
}

我必须这样做，因为这样做

style="font-weight: ${ source.weight }"

不起作用...可能是因为 weight 是保留字？

所以，基本上，我想要实现的是将 font-weight 设置为我的 source.weight 值，然后设置 font-style: italic; 如果标志 is_italic 为真。

有什么想法吗？

Answer 1

您可以为此使用 css 属性。您可以在 css 属性的值中输入字符串内插样式，以允许您创建所需的行为。

在你的情况下，你需要这样的东西:

<span repeat.for="source of item.data.sources | sort: 'weight' : 'asc'" 
  if.bind="source.weight" 
  class="weight" 
  css="font-weight: ${source.weight}; ${source.is_italic ? 'font-style: italic;' : ''}"
>
  ${source.name}
</span>

---

如果您想阅读更多关于样式绑定(bind)的内容，我推荐 this article .