Aurelia中双style.bind无效，求单style.bind实现多样式方案

我明白你遇到的困扰了——Aurelia确实不允许在同一个元素上绑定多个style.bind属性，后面的绑定会直接覆盖前面的，所以你得把两个样式逻辑合并到一个绑定里。这里有两种简单的实现方式：

方法1：使用Style对象绑定（推荐） #

这是Aurelia官方推荐的style绑定方式，语法清晰且易于维护。直接在绑定中构建一个样式对象，每个键对应CSS属性，值则根据你的数据动态生成：

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

为什么这能解决问题？ #

• 对象语法让你可以在一个style.bind中同时定义多个CSS属性
• 对于font-style，我们用三元表达式判断source.is_italic：如果为true就设为italic，否则保持默认的normal
• 关于你提到的weight作为保留字的问题，在对象绑定中直接使用source.weight完全没问题，Aurelia会自动把数字值（比如400、700）转换成合法的CSS字符串

方法2：复用你的FontWeight值转换器（如果需要保留） #

如果你想继续使用已有的FontWeightValueConverter，可以稍微调整一下用法——不过注意你的转换器当前返回的是完整的CSS声明（比如font-weight: 700），而对象绑定只需要属性值，所以可以修改转换器让它只返回weight值：

export class FontWeightValueConverter {
  toView(weight) {
    return weight; // 直接返回weight值，不需要拼接CSS属性名
  }
}

然后在模板中这样用：

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

额外说明 #

之前你尝试的style="font-weight: ${ source.weight }"无效，大概率是因为模板字符串插值的方式在Aurelia的静态style属性中不会被动态解析——而style.bind的对象语法是专门用来处理动态样式绑定的，所以会更可靠。

内容的提问来源于stack exchange，提问作者JV Lobo