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 }"

不起作用......也许是因为重量是保留字？

所以，基本上，我想要实现的是将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>

如果您想了解更多关于样式绑定的信息，我建议this article。

在Aurelia中使用两个style.bind

1 个答案: