How to use static methods in view templates

I want to use static class constants in my view template

Javascript

class FilterModel {
  static const FILTER_TYPE_STRING() {
    return 'string';
  }
}

HTML

<div show.bind="selectedFacet.type===FilterModel.FILTER_TYPE_STRING">
</div>

Short answer: the binding language does not support that.

I met the problem before, but didn't find a good workaround. In such case, I usually define a constant, which the class would set the value from in the constructor and add a comment to show it should be static.

const _filterTypeString: string = 'string';

export class FilterModel {
    /*static*/ filterTypeString: string = _filterTypeString;
}

Longer answer: static members in JavaScript are being transpiled directly into the class, not into the prototype, so instances do not have reference to it. The difference is:

class MyClass {
    instanceMember: number = 256
    static staticMember: number = 1024;
}

//referencing them:
MyClass.prototype.instanceMember
MyClass.staticMember

Everytime when you create an object instance, it creates a copy of the prototype, so that this would have equal values to the prototype. That's what Aurelia does also, creates an instance, when creating a view-model.

In the view template, you can only access members of that object, which is inherited from the prototype. Since the static method is not a member of that object, you cannot access it. Of course, you might create a reference, but I found this workaround more annoying than the one above. With code example:

export class FilterModel {
    static filterTypeString: string = 'string';
    refToFilterTypeString = FilterModel.filterTypeString;
}

HTML:

<div show.bind="selectedFacet.type === refToFilterTypeString">
</div>