Enhancing with aurelia-cli (not jspm)

Help Requests
1

Following this example: http://aurelia.io/docs/fundamentals/app-configuration-and-startup#leveraging-progressive-enhancement

I need to enhance some html within the body element of lets say the index page. How can I achieve that? The example shows importing aurelia bootstrapper using SystemJS. Is that the same approach I would take when using aurelia-cli?

Thanks in advance =)

2

Assumming the default index.html generated by the CLI, in main.js add the global resources and then call aurelia.enhance:

    export function configure(aurelia) {
      aurelia.use
        .standardConfiguration()
        .developmentLogging()
        .globalResources('resources/my-component');
        
        aurelia.start().then(() => aurelia.enhance());
    }
3

But what if I do not want to specify aurelia-app=“main”? The idea is that I need to manually bootstrap the app in a script tag and the actual html would be nested in the body tag. I need to bootstrap the app in the index.html without having to rely on a startup file (main.js)… Make sense? =/

Something like this:

In index.html

<\body>
<\div id=“container”><\div>
<\script>

bootstrap app
enhance div

<\script>
<\body>

4

When using aurelia.setRoot() you can pass your desired view model and host element as arguments:

setRoot(root: string = null, applicationHost: string | Element = null): Promise<Aurelia> {

aurelia.enhance() allows initialising specific element with a given view model.

enhance(bindingContext: Object = {}, applicationHost: string | Element = null): Promise<Aurelia> {

So you should be able to initialize everyting manually as shown in the examples you linked.

5

Thank you =)

One more thing, I couldnt get DI working for manual bootstrapping with enhance! I tried both @autoinject and @inject… The view model uses a service which requires HttpClient to talk to an API… Any suggestions?

6

I got it to work with something like this (Aurelia-cli - requirejs as loader)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aurelia</title>
</head>
<body>
<div>
 <p>${message}</p>
 <button click.trigger="btnClick()">Click Me!</button>
</div>
<script src="scripts/vendor-bundle.js"></script>
<script>
 requirejs(['unindexed-upload-form'], function (form) {
  requirejs(['aurelia-bootstrapper', 'aurelia-event-aggregator'], function (bootstrapper, aggregator) {
    bootstrapper.bootstrap(function (aurelia) {
      aurelia.use
        .defaultBindingLanguage()
        .defaultResources()
        .developmentLogging();

      var vm = new form.UnindexedUploadForm();

      aurelia.start().then(function () {
        aurelia.enhance(vm, document.body);
      });
    });
  });
});

</script>
</body>
</html>

But I guess DI doenst work? I have to pass the aggregator as a param to the UnindexedUploadForm() constructor?

I was hoping require would satisfy the dependencies…

7

That was simple!

var vm = aurelia.container.get(demoModule.DemoViewModel);

Wow Aurelia is the bomb!

1 Like