javascript - Aurelia:总是在 View 中调用方法(升级后出现问题)

Question

我们已经升级了 Aurelia(特别是 aurelia-framework 到 1.0.6，aurelia-bindong 到 1.0.3 )，现在我们面临一些绑定(bind)问题。

有一个带有计算类的元素列表，我们有一个方法 int 包含该列表的自定义元素:

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

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

升级后它就停止工作了，所以每当 selected(顺便说一句，它是可绑定(bind)的)或 currentTag 属性被修改时，getClass只是没有调用方法。

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

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

我知道这看起来，好吧......很糟糕，但这让 t === $parent.currentTag 工作了，但是 disabled-option 类仍然是'应用。

所以，问题是:

如何强制 Aurelia 在 View 中调用属性中的方法？

附言

我知道这可能会导致一些性能问题。

小记:

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

更新

我最后得到了 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>

希望对您有所帮助!