UPD

Question

我们已将Aurelia（特别是aurelia-framework升级为1.0.6，aurelia-bindong升级为1.0.3），现在我们面临一些约束性问题。

有一个带有计算类的元素列表，我们在包含列表的自定义元素中有一个方法：

getClass(t) {
    return '...' + 
           (this.selected.indexOf(t) !== -1
                ? 'disabled-option' :
                : ''
           ) + (t === this.currentTag 
                ? 'selected-option' 
                : ''
           );
}

列表元素class.one-way="$parent.getClass(t)"，一切正常。

升级后，它只是停止工作，所以只要selected（顺便说一下它是可绑定的）或currentTag属性被修改，就不会调用getClass方法。

我通过将此逻辑移到视图中来部分解决了这个问题：

class="${$parent.getClass(t) + (selected.indexOf(t) !== -1 ? 'disabled-option' : '') (t === $parent.currentTag ? 'selected-option' : '')}"

我知道看起来很好......但这使得t === $parent.currentTag工作，但disabled-option类仍未应用。

所以，问题是：

如何强制Aurelia调用视图中属性的方法？

P.S。

我了解这可能会导致一些性能问题。

小记：

我不能简单地向列表元素添加selected属性，因为我不会以某种方式修改自定义元素的数据，我基本上希望我的代码能够正常工作而不需要做太多更改。

UPD

~~我最后使用this awesome solution by Fabio Luz进行了这个小编辑：~~

UPD 以下是解释this awesome solution by Fabio Luz的方法。

export class SelectorObjectClass {
    constructor(el, tagger){
        Object.assign(this, el);
        this.tagger = tagger;
    }

    get cssClass(){
        //magic here
    }
}

和

this.shown = this.shown(e => new SelectorObjectClass(e, this));

但我最终得到this (defining an extra array)。

Answer 1

您必须使用属性而不是函数。像这样：

//pay attention at the "get" before function name
get getClass() {
    //do your magic here
    return 'a b c d e';
}

HTML：

<div class.bind="getClass"></div>

修改

我知道这可能是一种矫枉过正，但这是我迄今为止找到的最好的解决方案：

为对象创建一个类：

export class MyClass { constructor(id, value) { this.id = id; this.value = value; } get getClass() { //do your magic here return 'your css classes'; } }

使用上面的类来创建数组的对象：

let shown = []; shown[1] = new MyClass('someId', 'someValue'); shown[2] = new MyClass('someId', 'someValue');

现在，您将能够使用getClass属性：

<div repeat.for="t of shown" class.bind="t.getClass">...</div>

希望它有所帮助！

Answer 2

看起来很伤心。

我想念你在html中计算类的观点。尝试该代码，它应该对你有所帮助。

computedClass(item){
  return `
     ${this.getClass(item)}
     ${~selected.indexOf(item) ? 'disabled-option': ''}
     ${item === this.currentTag ? 'selected-option' : ''}
  `;
}

如果状态：/

，您的代码无法正常工作会导致您首先错过其他选项

<强>更新要切换属性状态，请尝试selected.bind="true/false"

祝你好运，叶戈尔

Answer 3

Fabio提供了一个很好的解决方案，但它引起了问题（与自定义元素双向绑定的数据（选择结果）与输入和输入的类型不同。等等）。这绝对可以修复，但它需要一个重要的时间并导致重写测试等。或者，是的，我们可以把原始对象作为一些属性等等等等等...

反正：

还有另一种解决方案，不太优雅，但实施起来要快得多。

让我们声明一个额外的数组
```
@bindable shownProperties = [];
```
注入ObserverLocator

观察所选数组

this.obsLoc.getArrayObserver(this.selected)
    .subscribe(() => this.selectedArrayChanged);

更新shownProperties

isSelected(t) {
    return this.selected.indexOf(t) !== -1;
}

selectedArrayChanged(){
    for(var i = 0; i < this.shown.length; i++){
        this.shownProperties[i] = {
            selected: this.isSelected(this.shown[i])
        }
    }
}

最后，在视图中：

class="... ${shownProperties[$index].selected ? 'disabled-option' : '')} ..."

所以，故事的寓意：

不要像我一样在视图中使用方法：）

Aurelia：总是在视图中调用方法（升级后的问题）

如何强制Aurelia调用视图中属性的方法？

P.S。

小记：

UPD

3 个答案:

反正：

所以，故事的寓意：