Question

我有一个来自API的项目列表，但它们不会一直相同，因此数组中的项目数总是在变化。我正在为每个项目创建一个复选框。

用户可以选中/取消选中每个项目。这就是我想要做的事情：

选中某个项目时，会将该项目的ID推送到数组
取消选中某个项目时，它会从数组中删除该项目的ID

我只需要知道我是如何根据是否已选中或未选中来调用某些内容。我已经尝试过＆＃34; checked.delegate＆＃34;和一个＆＃34; checked.trigger＆＃34;而我似乎无法让它发挥作用。

只是一个常规的click.delegate不会工作，因为我无法确定它是真还是假，我无法为所有这些设置变量，因为我不知道＆不始终知道哪些项目将来自API。有什么建议吗？

Answer 1

尝试change.delegate或change.trigger，如下所示：

VM方法：

logchange(value) {
  console.log(value);
}

查看：

<input type="checkbox" change.delegate="logchange($event.target.checked)" />

Answer 2

你可以做到这一点的一种方法是在二传手的帮助下。假设你有一个像这样的复选框：

<input type="checkbox">

在View Model中创建一个私有字段，然后用getter和setter包装它：

get isChecked(){
    return this._isChecked;
}

set isChecked(value){
    this._isChecked = value;
    //enter your extra logic here, no need for an event handler
}

private _isChecked: boolean;

然后将isChecked绑定到视图：

<input type="checkbox" checked.bind="isChecked">

每次选中或取消选中复选框时，都会调用setter，您可以在setter中调用所需的任何方法。

实现这一目标的另一种非常规方法是使用@bindable装饰器，如下所示：

@bindable isChecked: boolean;

这是非常规的，因为您可能不希望isChecked可绑定，但装饰器允许您访问isCheckedChanged方法：

isCheckedChanged(newValue, oldValue){
     //Logic here
}

当然，您可以通过change和change.trigger收到change.delegate事件，但已在另一个答案中提及

如何在取消选中和Aurelia检查时调用一个函数

2 个答案: