在 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 唯一做的就是 return CSS 语法中的 font-weight：

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

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

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

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

所以，基本上，我想要实现的是用我的 source.weight 值设置 font-weight，然后如果标志 is_italic 为真，则设置 font-style: 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>

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

在 Aurelia 中使用两个 style.bind

Using two style.bind in Aurelia

css

aurelia