App with just Aurelia binding, and templating?

Help Requests
21

@ormasoftchile That’s a really good question!

For almost every real world use-case, there would be need to observe property change, I think.

So, I tried to add messageChanged(newValue, oldValue) method to MyApp class, import observable and copy/paste __decorate(...), __metadata(...) functions and call to __decorate, but it does not work.

This is the actual code:

<script type="module">
    import { observable } from '@aurelia/runtime';
    import { Aurelia, StandardConfiguration } from '@aurelia/runtime-html';

    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
        return c > 3 && r && Object.defineProperty(target, key, r), r;
    };
    var __metadata = (this && this.__metadata) || function (k, v) {
        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
    };

    class MyApp {
        message = "Hello Aurelia 2!";

        messageChanged(newValue, oldVelue) {
            console.log(`${oldVelue} -> ${newValue}`);
        }

        reverseMessage() {
            this.message = this.message.split('').reverse().join('');
        }
    };
    __decorate([
        observable,
        __metadata("design:type", String)
    ], MyApp.prototype, "message", void 0);

    new Aurelia()
        .register(StandardConfiguration)
        .enhance({
            host: document.querySelector('#my-app'),
            component: MyApp
        });
</script>

If I remember correctly, Aurelia v1 has static helper method somewhere (I think it is called Decorate), as a helper when using plain es5. I am not aware if this is possible in Aurelia v2.

There is a link to API documentation, but it does not help at all:
http://aurelia.io/docs/api/metadata/function/decorators

1 Like
22

I think it’d be good if we had some more doc first. It can be use case driven, for example: I want to sprinkle some behavior on a html page, or hydrate some pre-rendered html page with Aurelia. Then we can re-organise things and make it better. At the moment, the doc is around enhance < App configuration and startup - The Aurelia Docs> and it’s probably not the simplest way to explain what can be done with Aurelia & this feature/way of starting app.

1 Like
23

I can add example in /docs/user-docs/developer-guides/scenarios section. Something like:

Enhance pre-rendered HTML document with Aurelia data-binding

However, I think, for this feature to be useful, we would need 2 improvements, that, currently, I have no idea if they work:

  1. To be able to react on property changes (e.g. to wire up property message and messageChanged function). So, more generally, to be able to use decorators like observable in plan JavaScript, perhaps via helper (similar to v1 approach for ES5, without transpiler).
  2. To have “data-binding only” bundle, because first load, using native ES modules is super-slow. When hitting my example for the first time (without any browser cache) it takes couple of seconds to hydrate the page. Pre-bundled Vue, in my first example, does hydrating in way under one second. In both cases libraries are referenced from CDN.

So, if documentation-first is better approach, I’ll add my example and explanation. If it’s better to add GitHub issue first, until we sort everything out, also fine for me.

1 Like
24

Let’s create a GH issue, then we can continue from there

1 Like
25

Added the GH issue: Simple Data-Binding-Only flavor of Aurelia 2

2 Likes
26

I really agree this is a great starting point and also a real world use case.