# App with just Aurelia binding, and templating?

**URL:** <https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841>\
**Category:** Help Requests\
**Created:** [February 26, 2018, 4:25pm UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841 "2018-02-26T16:25:05Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![dkent600](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dkent600/32/1603_2.png) [@dkent600](https://discourse.aurelia.io/u/dkent600)\
**Post date:** [February 26, 2018, 4:25pm UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/1 "2018-02-26T16:25:05Z")

</div>

Anyone know of instructions for enabling a simple web app to use _only_ the Aurelia binding functionality?

And then what would be the second step in adding templating to the app (if they don’t always go together)?

Which libraries would be required, and what kind of runtime initialization?

Thanks!

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [February 27, 2018, 12:00am UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/2 "2018-02-27T00:00:25Z")

</div>

```
function configure(aurelia: Aurelia): void {
 aurelia.use
        .defaultBindingLanguage()
        .defaultResources()
 aurelia.start().then(() => aurelia.setRoot('app', document.body));
}
```

---

<div class="post-metadata">

**Author:** ![dkent600](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dkent600/32/1603_2.png) [@dkent600](https://discourse.aurelia.io/u/dkent600)\
**Post date:** [February 27, 2018, 3:41am UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/3 "2018-02-27T03:41:27Z")

</div>

Thanks Alexander-Taran.

The example you give is pulling in the Aurelia framework, starting it as if there is routing and so on. I don’t want to do that. I just want binding and maybe templating functionality without any other over-arching framework. I can manually tell the binding engine to bind the html to the viewmodel. My question is about how I would make this happen from the point of view of packaging and any necessary higher-level initialization. Is it not possible without Aurelia.start, setRoot and so on?

---

<div class="post-metadata">

**Author:** ![lancelot316](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lancelot316/32/527_2.png) [@lancelot316](https://discourse.aurelia.io/u/lancelot316)\
**Post date:** [February 27, 2018, 2:16pm UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/4 "2018-02-27T14:16:57Z")

</div>

I think what you may need to use is enhance instead of setRoot. I threw together a quick example on git hub which can be found here:[aurelia enhance example](https://github.com/lancelot316/aurelia-enhance-example)  
there is also a short description in the documentation about it.  
[Progressive Enhancement](http://aurelia.io/docs/fundamentals/app-configuration-and-startup#leveraging-progressive-enhancement)

---

<div class="post-metadata">

**Author:** ![dkent600](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dkent600/32/1603_2.png) [@dkent600](https://discourse.aurelia.io/u/dkent600)\
**Post date:** [February 27, 2018, 3:42pm UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/5 "2018-02-27T15:42:34Z")

</div>

Interesting lancelot316! Yes, I was intending to use `enhance`, but didn’t know about the one that hangs off `aurelia.start()`.

From the responses so far, I’m getting the impression that supplying `configure(aurelia)` and calling `aurelia.start()` are mandatory to do binding and templating. Do you think that is correct?

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [February 27, 2018, 5:21pm UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/6 "2018-02-27T17:21:05Z")

</div>

Yes… bottstrapper + framework compose basic services like DI, loader, PAL and so on.

---

<div class="post-metadata">

**Author:** ![lancelot316](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lancelot316/32/527_2.png) [@lancelot316](https://discourse.aurelia.io/u/lancelot316)\
**Post date:** [February 27, 2018, 5:28pm UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/7 "2018-02-27T17:28:09Z")

</div>

Yes I think that is correct. The `configure(aurelia)` function called as part of the bootstrapping of the framework. I think the simplest configure function you can have is something like

```
export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .feature('resources');
     
    aurelia.start().then(() => aurelia.enhance());
}

```

All your code for your components could then be placed in the resources folder and registered using the `index.js` file in that folder.

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [February 27, 2018, 5:38pm UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/8 "2018-02-27T17:38:29Z")

</div>

.standardConfiguration() will pull in router and history… Not what op wanted (-:

[http://aurelia.io/docs/fundamentals/app-configuration-and-startup#bootstrapping-aurelia](http://aurelia.io/docs/fundamentals/app-configuration-and-startup#bootstrapping-aurelia)

---

<div class="post-metadata">

**Author:** ![lancelot316](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lancelot316/32/527_2.png) [@lancelot316](https://discourse.aurelia.io/u/lancelot316)\
**Post date:** [February 27, 2018, 5:54pm UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/9 "2018-02-27T17:54:12Z")

</div>

Maybe something like this would work better then

```
export function configure(aurelia) {
    aurelia.use
       .defaultBindingLanguage()
       .defaultResources()
       .eventAggregator();

   aurelia.start().then(() => aurelia.enhance());
}

```

I think this should configure the default data-binding language (.bind, .trigger, etc.), the default set of view resources (repeat, if, compose, etc.), and the event aggregator (app-wide pub/sub messaging).

more info can be found in the docs at [Bootstrapping Aurelia](http://aurelia.io/docs/fundamentals/app-configuration-and-startup#bootstrapping-aureliag)

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [February 27, 2018, 6:38pm UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/10 "2018-02-27T18:38:40Z")

</div>

`aurelia-binding` is a collection of classes that handle data binding for input, event, checked, select, property observation.

`aurelia-templating` is a collection of classes that handle html template compilation and rendering, creating `Container`s for instances to help proper dependency injections

`aurelia-templating-binding` is a collection of classes that help you to wire `aurelia-templating` and `aurelia-binding` together, as by default `aurelia-templating` does not understand attributes such as `prop.bind="value"`. It’s the job of this lib to desugar those binding commands into proper binding expressions and instances. How special bindings, prop of a custom attribute or custom element should be created, is based on the information of resources (`ViewResources` class) passed by `aurelia-templating` when doing compilation.

`aurelia-framework` is a collection of classes that wire those thing together, to register resources, default binding language, to translate `prop.bind="value"`

`aurelia-bootstrapper` is a collection of functions that help ensure all requirements of an Aurelia application have been supplied, and init an instance of Aurelia.

* * *

From the look of those, it’s not very desirable to use only Aurelia binding. But if insisted, you can use the `Parser` to parse expression, and use it to evaluate value from a given object / value. `BindingEngine` to observe property of an object, or collection mutations. I bet you will eventually arrive where Aurelia currently is. But maybe you can do it better that what we have, so if you could give some more information on what you are trying to achieve, folks can help better.

---

<div class="post-metadata">

**Author:** ![nenadvicentic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/nenadvicentic/32/1191_2.png) [@nenadvicentic](https://discourse.aurelia.io/u/nenadvicentic)\
**Post date:** [October 4, 2021, 7:23pm UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/11 "2021-10-04T19:23:40Z")

</div>

Hi guys,

I’ve been looking at this feature occasionally over the years and I came back to this again.

What would be highly desirable is to have simple way to enhance single server rendered HTML page. I think this is use case that would help introduce bunch of people to Aurelia, if implemented properly.

Additionally, this is something that @EisenbergEffect promised during while making 1st presentations of still to be finalized Aurelia Framework back in the day.

Currently, Vue does this very well as described in Getting started examples:

> **[Introduction — Vue.js](https://vuejs.org/v2/guide/#Handling-User-Input)**
>
> Vue.js - The Progressive JavaScript Framework

Or, same example in the static page from scratch (Bootstrap 5.1 + Vue 2.6):

```auto
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
        <title>Test data-bindings on the static page with the Vue js</title>
    </head>
    <body>
        <div id="my-app" class="container">
            <h1>Form with binding, example</h1>
            <form class="form" v-on:submit.prevent>
                <div class="form-group">
                    <label>Message:
                        <input type="text" class="form-control" v-model="message" />
                    </label>
                </div>
                <button class="btn btn-primary" v-on:click="reverseMessage">Reverse Message</button>
            </form>
            <p>
                {{ message }}
            </p>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha256-85WHXrXVjFEoxDSBLNClPUOLEVNvf9FXcHfYpcYS4f0=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
        <script deffer src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js" integrity="sha256-kXTEJcRFN330VirZFl6gj9+UM6gIKW195fYZeR3xDhc=" crossorigin="anonymous"></script>
        <script>
            new Vue({
                el: '#my-app',
                data: {
                    message: 'Hello Vue.js!'
                },
                methods: {
                    reverseMessage: function () {
                        this.message = this.message.split('').reverse().join('');
                        return false;
                    }
                }
            });
        </script>
    </body>
</html>

```

If this would be possible to achieve with Aurelia 2, even better!

---

<div class="post-metadata">

**Author:** ![nenadvicentic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/nenadvicentic/32/1191_2.png) [@nenadvicentic](https://discourse.aurelia.io/u/nenadvicentic)\
**Post date:** [October 8, 2021, 8:51pm UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/12 "2021-10-08T20:51:38Z")

</div>

Hi guys,

I managed to make almost identical sample using Aurelia 2 from CDN:

```auto
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
        <title>Test data-bindings on the static page with the Aurelia 2</title>
        <script type="importmap">
            {
                "imports": {
                    "aurelia": "https://cdn.jsdelivr.net/npm/aurelia@2.0.0-alpha.21/dist/native-modules/index.js",
                    "my-app": "/js/my-app.js"
                }
            }
        </script>
    </head>
    <body>
        <div id="my-app" class="container">
            <div class="card">
                <div class=card-header>
                    Form binding with Aurelia v2
                </div>
                <div class="card-body">
                    <form>
                        <label>
                            Message:
                            <input type="text" class="form-control" value.bind="message" />
                        </label>
                        <button class="btn btn-primary" click.trigger="reverseMessage()">Reverse Message</button>
                    </form>
                    <p>
                        ${ message }
                    </p>
                </div>
            </div>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha256-85WHXrXVjFEoxDSBLNClPUOLEVNvf9FXcHfYpcYS4f0=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
        <script type="module" src="https://cdn.jsdelivr.net/npm/aurelia@2.0.0-alpha.21/dist/native-modules/index.js" integrity="sha256-fveymNY/nns8uk5KeuFTcdXdmAPvnXvNda5CJUCX/fU=" crossorigin="anonymous"></script>
        <script type="module">
            import Aurelia from 'aurelia';

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

                reverseMessage() {
                    this.message = this.message.split('').reverse().join('');
                }
            }

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

```

Here is the [Fiddle link](https://jsfiddle.net/c60wmz47/).

If I could only improve it to load only needed components (no `fetch-client`, `router`, `route-recognizer`…), that would be awesome!

---

<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:** [October 9, 2021, 7:35am UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/13 "2021-10-09T07:35:20Z")

</div>

i think thats more up to how the hosted built aurelia2 file is. it already includes all the things needed, so you’d need a dedicated naked aurelia core.

---

<div class="post-metadata">

**Author:** ![nenadvicentic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/nenadvicentic/32/1191_2.png) [@nenadvicentic](https://discourse.aurelia.io/u/nenadvicentic)\
**Post date:** [October 9, 2021, 9:52am UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/14 "2021-10-09T09:52:41Z")

</div>

I agree for the main aurelia module - it has all the imports inside it, including once that are not needed for the use case where we just want to enhance element on the static page.

I would be fine going in direction of creating my own `main.js` with custom `enhance` method and importing only needed aurelia modules, but I’m not even sure if it’s possible to do in a such granular way.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [October 10, 2021, 2:59am UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/15 "2021-10-10T02:59:35Z")

</div>

At the moment, the main bundle of the `aurelia` module is supposed to be used with a bundler, so that all the unnecessary bits for an application can be shaken off. What we can do is to provide some different dists that only include the basic, which is the equivalent of only `kernel`/`runtime`/`runtime-html` in it.

If an application only wants binding & templating, it can be done such as:

```auto
import { Aurelia, StandardConfiguration } from '@aurelia/runtime-html'

new Aurelia()
  .register(StandardConfiguation)
  .app({
    component: class MyApp {},
    host: document.querySelector('my-app')
  })
  .start()

```

---

<div class="post-metadata">

**Author:** ![nenadvicentic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/nenadvicentic/32/1191_2.png) [@nenadvicentic](https://discourse.aurelia.io/u/nenadvicentic)\
**Post date:** [October 15, 2021, 3:12pm UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/16 "2021-10-15T15:12:24Z")

</div>

@bigopon Thanks a lot, man! I have few corrections for your example to work, but you put me on the right track!

First, easy one, you have a typo in `.register(StandardConfiguation)`, `r` missing in configuration. But more importantly, your example is throwing an exception, because of **missing metadata** for `MyApp` class.

So my JavaScript snippet ended up looking like this:

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

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

        reverseMessage() {
            this.message = this.message.split('').reverse().join('');
        }
    };

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

```

I use native ES modules and `<script type="importmap">` at the top of the page. Here is the link to working [JS Fiddle](https://jsfiddle.net/qyhewzoa/).

This is full code of static HTML page:

```auto
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
        <title>Test data-bindings on the static page with the Aurelia 2</title>
        <script type="importmap">
            {
                "imports": {
                    "@aurelia/runtime-html": "https://cdn.jsdelivr.net/npm/@aurelia/runtime-html@2.0.0-alpha.21/dist/native-modules/index.js"
                }
            }
        </script>
    </head>
    <body>
        <div id="my-app" class="container">
            <div class="card">
                <div class=card-header>
                    Form binding with Aurelia v2
                </div>
                <div class="card-body">
                    <form>
                        <label>
                            Message:
                            <input type="text" class="form-control" value.bind="message" />
                        </label>
                        <button class="btn btn-primary" click.trigger="reverseMessage()">Reverse Message</button>
                    </form>
                    <p>
                        ${ message }
                    </p>
                </div>
            </div>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha256-85WHXrXVjFEoxDSBLNClPUOLEVNvf9FXcHfYpcYS4f0=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
        <script type="module" src="https://cdn.jsdelivr.net/npm/@aurelia/runtime-html@2.0.0-alpha.21/dist/native-modules/index.js" integrity="sha256-tqalVl0aB3Jqx/px/QMCBSXH0VRzI9UTxOAe/VgVC/4=" crossorigin="anonymous"></script>
        <script type="module">
            import { Aurelia, StandardConfiguration } from '@aurelia/runtime-html';

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

                reverseMessage() {
                    this.message = this.message.split('').reverse().join('');
                }
            };

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

```

I honestly think you guys should put this use-case in getting started documentation for version 2. This can be entry point for acquiring new Aurelia users.

---

<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:** [October 15, 2021, 4:36pm UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/17 "2021-10-15T16:36:15Z")

</div>

glad to see you got your example working. Our docs btw are driven by a github repo, so feel free to create a PR where you see the example fit.

---

<div class="post-metadata">

**Author:** ![nenadvicentic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/nenadvicentic/32/1191_2.png) [@nenadvicentic](https://discourse.aurelia.io/u/nenadvicentic)\
**Post date:** [October 15, 2021, 5:55pm UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/18 "2021-10-15T17:55:09Z")

</div>

@zewa666 I think it would be good if someone from the core team throws his opinion about my example, before we rush into writing docs.

It could be that this feature needs a bit more love, before final v2 release. For example, bundled version of `runtime-html` together with dependencies, as build artifact (and available on CDN) as @bigopon suggested.

I just compared performance of my View example to Aurelia 2 example. Even though they are both trivial at the moment, Vue “grabs” template and inserts correct values in half of the time that Aurelia needs. Most obvious part of the delay is time spent on network requests for each `aurelia` module.

---

<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:** [October 15, 2021, 8:40pm UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/19 "2021-10-15T20:40:20Z")

</div>

in this case I’d ask you to turn this to an github issue and continue the necessary parts there if there’s additional work to be done. this helps with keeping things focused and allows priorization

---

<div class="post-metadata">

**Author:** ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)\
**Post date:** [October 17, 2021, 4:20am UTC](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841/20 "2021-10-17T04:20:31Z")

</div>

I found this example quite interesting.  
Have you worked out how to observe properties?  
I didn’t realize how to declare @observable and/or @bindable in this case.

Regards,

[Next page](https://discourse.aurelia.io/t/app-with-just-aurelia-binding-and-templating/841.md?page=2)