Using decorators (binding, observable, etc.) as functions

Help Requests
1

I’m working on a solution for drop-in script for some of our projects that are just a single view and want to take advantage of aurelia’s view engine (without transpilers like babel). I have all working fine but I don’t know how to handle the decorators. Anyone have any examples of using decorators, like @bindable in a function so I can use this in vanilla JS without transpilers?

example code I’m using…

const { observable, bindable } = au; // loaded via aurelia-script (umd)

export class Component {
    message = 'my component';
    bindableProp = 'foo'; // using in attr <component test="my val"></component>
    observableProp = 'bar'; // observe using naming convention below

    observablePropChanged(newVar, oldVar) {
        console.log('newVar: ', newVar, 'oldVar: ', oldVar);
    }
}
1 Like
2

there is an ongoing issue about this Simple Data-Binding-Only flavor of Aurelia 2 · Issue #1312 · aurelia/aurelia · GitHub

3

I found this to work for making a property bindable (applied to your example):

const { observable, bindable } = au; // loaded via aurelia-script (umd)

export class Component {
    message = 'my component';
    bindableProp = 'foo'; // using in attr <component test="my val"></component>
    observableProp = 'bar'; // observe using naming convention below

    observablePropChanged(newVar, oldVar) {
        console.log('newVar: ', newVar, 'oldVar: ', oldVar);
    }
}
bindable('bindableProp')(Component);