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

**URL:** <https://discourse.aurelia.io/t/using-decorators-binding-observable-etc-as-functions/4495>\
**Category:** Help Requests\
**Created:** [December 2, 2021, 5:31pm UTC](https://discourse.aurelia.io/t/using-decorators-binding-observable-etc-as-functions/4495 "2021-12-02T17:31:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [December 2, 2021, 5:31pm UTC](https://discourse.aurelia.io/t/using-decorators-binding-observable-etc-as-functions/4495/1 "2021-12-02T17:31:54Z")

</div>

I’m working on a solution for [drop-in script](https://github.com/aurelia/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…

```auto
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);
    }
}

```

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [December 2, 2021, 9:38pm UTC](https://discourse.aurelia.io/t/using-decorators-binding-observable-etc-as-functions/4495/2 "2021-12-02T21:38:35Z")

</div>

there is an ongoing issue about this [Simple Data-Binding-Only flavor of Aurelia 2 · Issue #1312 · aurelia/aurelia · GitHub](https://github.com/aurelia/aurelia/issues/1312)

---

<div class="post-metadata">

**Author:** ![Bso](https://avatars.discourse-cdn.com/v4/letter/b/db5fbb/32.png) [@Bso](https://discourse.aurelia.io/u/Bso)\
**Post date:** [February 2, 2022, 7:22pm UTC](https://discourse.aurelia.io/t/using-decorators-binding-observable-etc-as-functions/4495/3 "2022-02-02T19:22:53Z")

</div>

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

```auto
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);
```