Aurelia绑定到带有参数的函数并强制更新

问题描述 投票:1回答:1

我已将isSelected(item)函数绑定到我的按钮,该函数将切换该类以显示是否已选择该类,但是该函数将不会随着更改而更新。

我不能使用带参数的计算属性。

是否有任何方法可以使该函数与绑定函数一起使用,并使其通过@computedFrom装饰器或类似工具理想地进行更新?

此处为示例:

https://codesandbox.io/s/aurelia-typescript-sandbox-8oksr?fontsize=14

您将注意到人2已通过该功能正确绑定,但是单击其他项不会更新UI。

function binding aurelia
1个回答
0
投票

我在尝试实现用于控制选定指标类的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){}
}
© www.soinside.com 2019 - 2024. All rights reserved.