Aurelia - Accessing Updated Class Properties From Injection?

I'm still trying to find an answer to Aurelia JS - Making a synchronous HTTP request, to change data before page load? - so I tried the following in the code example for that quest

Solution 1:

Well, I think I found a fix - although this is all a bit of guesswork, so I would still appreciate a proper answer from someone.

First, I thought the issue was "caching", but it looks like it is far more likely, that for instance Container.instance.get(ContactList) returns a new instance of the class, rather than the one existing instance. Here are some relevant quotes I found:

Enhanced Dependency Injection Use · Issue #73 · aurelia/dependency-injection · GitHub suggests using this:

  // configure the container
  let container = aurelia.container;
  container.registerInstance(ApiClient, new ApiClient(isDebug));
  ...
  aurelia.start().then(a => a.setRoot());
  ...

... in main.js - I tried applying this to the ContactList class, but couldn't get my example to work...

If Aurelia understands "import", why use dependency injection?

This is because Aurelia's Dependency Injection container is instantiating an instance for you. ...
You are telling Aurelia "I need one of these, please give it to me," and Aurelia says "Sure thing, I've created one or I already had one lying around, here it is."

Hmm, well, in my example, by the time we get to the "a2" log, the DI should already "know" that it already had created one ContactList - but it apparently still creates a new object anyway...

How to create a singleton service in Aurelia?

By default, the DI container assumes that everything is a singleton instance; one instance for the app. However, you can use a registration decorator to change this.

Well, apparently it didn't assume that for ContactList in the example above ?!

The solution for me came from the other answer in the previous post, How to create a singleton service in Aurelia?:

So I realized I was thinking about this too hard. I was trying to depend on the framework (Aurelia) to do all the work, but actually it was a simple ES6 class change that makes it an instance.

... and here is how I applied that to the ContactList class, adding a cl_instance variable:

import {EventAggregator} from 'aurelia-event-aggregator';
import {WebAPI} from './web-api';
import {ContactUpdated, ContactViewed} from './messages';

let cl_instance = null;

export class ContactList {
  static inject = [WebAPI, EventAggregator];

  constructor(api, ea){
    if(!cl_instance) {
    cl_instance = this;

    this.api = api;
    this.contacts = [];

    ea.subscribe(ContactViewed, msg => this.select(msg.contact));
    ea.subscribe(ContactUpdated, msg => {
      let id = msg.contact.id;
      let found = this.contacts.find(x => x.id === id);
      Object.assign(found, msg.contact);
    });
    } // end if!
    return cl_instance;
  }
  ....

With this, apparently the ContactList class now behaves as a singleton (?!), and so everytime I ask for a reference to a class instance, I'll get the same class instance (and not instantiate a new one).

That means also that now this.conlist.contacts in AppClist refers to the actual datasource contacts property variable in ContactList, and thus assigning to it now triggers the binding and updates the GUI - which thus solves the problem in Aurelia JS - Making a synchronous HTTP request, to change data before page load? - I've saved that example for reference on https://gist.run/?id=f4bd01c99f9973cb76d8640f6248c2e3