我已将isSelected(item)函数绑定到我的按钮,该函数将切换该类以显示是否已选择该类,但是该函数将不会随着更改而更新。
我不能使用带参数的计算属性。
是否有任何方法可以使该函数与绑定函数一起使用,并使其通过@computedFrom装饰器或类似工具理想地进行更新?
此处为示例:
https://codesandbox.io/s/aurelia-typescript-sandbox-8oksr?fontsize=14
您将注意到人2已通过该功能正确绑定,但是单击其他项不会更新UI。
我在尝试实现用于控制选定指标类的isSelected()
方法时遇到了同样的问题。我调查了@computedFrom
。
我对此可能是错的,但是从我看到的@computedFrom
只能与未参数化的吸气剂一起使用。
@computedFrom('firstName', 'lastName')
get fullName() { return `${firstName} ${lastName}`}
所以问题在于我们要执行的操作,我们需要传递索引或项目,这会破坏我们使用@computedFrom
的能力。
我不太喜欢的替代方法,但是它确实有效,它是向您的每个person对象添加一个isSelected属性。然后您的代码将如下所示:
vm
selectPerson(person){
person.isSelected = !person.isSelected; //De-selects if already selected
}
view
<button
class="btn-gradient mini ${person.isSelected ? 'green': 'red'}"
click.delegate="selectPerson(person)"
repeat.for="person of people">${person.name}</button>
(或,如最近向我建议的,将您的person对象包装在包装器类中)
public class SelectableWrapper {
constructor(public person : Person, public isSelected : boolean){}
}