Aurelia:总是在视图中调用方法(升级后的问题)

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)"对于列表元素,一切OK.

在升级之后,它只是停止工作,因此每当selected(btw它的可绑定)或currentTag属性被修改时,该getClass方法就不会被调用.

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

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

我知道看起来很好......但是这样做了t === $parent.currentTag,但是这个disabled-option课仍然没有应用.

所以,问题是:

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

PS

我知道它可能会导致一些性能问题.

小记:

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

UPD

最后,Fabio Luz通过这个小编辑得到了这个很棒的解决方案:

UPD这是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));

但我最终得到了这个(定义了一个额外的数组).

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>

希望能帮助到你！